การจัดเรียง element ใน html จะเรียงจากบนลงล่างเสมอ

ลองเพิ่ม html

<div class="block">
            <h3>Heading</h3>
            <p>Advanced extended doubtful he he blessing together. Introduced far law gay considered frequently entreaties difficulty.
                Eat him four are rich nor calm. By an packages rejoiced exercise. To ought on am marry rooms doubt music.
                Mention entered an through company as. Up arrived no painful between. It declared is prospect an insisted
                pleasure. </p>
</div>
<div class="block">
            <h3>Heading</h3>
            <p>Advanced extended doubtful he he blessing together. Introduced far law gay considered frequently entreaties difficulty.
                Eat him four are rich nor calm. By an packages rejoiced exercise. To ought on am marry rooms doubt music.
                Mention entered an through company as. Up arrived no painful between. It declared is prospect an insisted
                pleasure. </p>

</div>
<div class="block">
            <h3>Heading</h3>
            <p>Advanced extended doubtful he he blessing together. Introduced far law gay considered frequently entreaties difficulty.
                Eat him four are rich nor calm. By an packages rejoiced exercise. To ought on am marry rooms doubt music.
                Mention entered an through company as. Up arrived no painful between. It declared is prospect an insisted
                pleasure. </p>

</div>

ถ้าอยากเปลี่ยนให้มาเรียงกันเป็นแนวนอน สามารถใช้ float มาช่วยได้

เพิ่ม class ชื่อ block

.block {
    width: 33.3%;
    float: left;
}

จะเห็นว่าเรียงกันแนวนอนอย่างที่ต้องการแล้ว แต่อ่านยาก ลองเพิ่มระยะห่างกับขอบเข้าไป

.block {
    width: 33.3%;
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}

จะทำให้ block ตัวสุดท้ายหล่นลงมา เนื่องจากพื้นที่ไม่พอ แก้ไขได้โดยการสั่งให้คำนวณใหม่ขากขนาดที่ใช้จริง ด้วย box-sizing

.block {
    width: 33.3%;
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

เมื่อไม่ต้องการ float แล้วต้องมีการ clear ทิ้งด้วย ( element ตัวต่อๆไปจะถือว่า float ไปด้วย ) ให้ทำการสร้าง div ใหม่ขึ้นมา 1 อัน มี class ชื่อ clr

<div class="clr"></div>

เพิ่ม class ชื่อ clr ใน style sheet

.clr {
    clear: both;
}

ศึกษาเพิ่มเติมเกี่ยวกับการใช้ float ได้ที่ https://www.w3schools.com/css/css_float.asp