Html và CSS làm cách nào tôi có thể căn chỉnh 3 div cạnh nhau

Question

Tôi có 3 div, 200px, 300px và 200px cách tôi có thể căn chỉnh chúng cạnh nhau, tất cả các ví dụ tôi đã thấy chỉ bao gồm 2. Tôi có Div1, Div2 đang hoạt động một cách chính xác nhưng Div3 đối với một số slide lý do dưới Div1 nằm bức tranh này

Đây là mã của tôi

<div style=" border-right:1px solid black; width:200px; float:left; position:relative; "> 
//div1 
</div> 

    <div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;"> 
    //div2 
    </div> 

<div style=" float: left; width: 200px;position:relative"> 
//div3 
</div> 

các Div1 có nội dung ngắn hơn vào nó, làm thế nào tôi có thể làm cho biên giới ở bên phải như miễn là đường viền trong Div2, cảm ơn để được giúp đỡ.

Answer 1

Tất cả các yếu tố trong một dòng

Bó div yếu tố trong một wrapper:

<div id="wrapper"> 
    <div id="first">first</div> 
    <div id="second">second</div> 
    <div id="third">third</div> 
</div> 

Sau đó thiết lập độ rộng của wrapper, và nổi cả ba div s:

#wrapper { 
    width:700px; 
    clear:both; 
} 
#first { 
    background-color:red; 
    width:200px; 
    float:left; 
} 
#second { 
    background-color:blue; 
    width:300px; 
    float:left; 
} 
#third { 
    background-color:#bada55; 
    width:200px; 
    float:left; 
} 

Ngoài ra, hãy sử dụng ID và/hoặc lớp học và giữ CSS tách biệt khỏi HTML. Điều này làm cho mã dễ đọc và dễ bảo trì hơn.

fiddle.

Tất cả các yếu tố trong một dòng, cùng chiều cao

Để thực hiện "cùng chiều cao" phần, bạn có thể sử dụng display:table, display:table-row, và display:table-cell để có được chiều cao phù hợp. Nó sử dụng một div thêm, do đó HTML trông giống như:

<div id="wrapper"> 
    <div id="row"> 
    <div id="first">first</div> 
    <div id="second">second<br><br></div> 
    <div id="third">third</div> 
    </div> 
</div> 

Các nổi sau đó có thể được gỡ bỏ, vì vậy CSS trông giống như:

#wrapper { 
    display:table; 
    width:700px; 
} 
#row { 
    display:table-row; 
} 
#first { 
    display:table-cell; 
    background-color:red; 
    width:200px; 
} 
#second { 
    display:table-cell; 
    background-color:blue; 
    width:300px; 
} 
#third { 
    display:table-cell; 
    background-color:#bada55; 
    width:200px; 
} 

Các fiddle.

Các Flexbox Way

Nếu bạn chỉ hỗ trợ trình duyệt mới hơn (IE 10 trở lên), Flexbox là một lựa chọn tốt. Đảm bảo tiền tố để được hỗ trợ tốt hơn. Thông tin thêm về các tiền tố có thể được tìm thấy here.

HTML

<div class="container"> 
    <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div> 
    <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div> 
</div> 

CSS

.container { 
    display:flex; 
    justify-content:center; 
} 
.container > div { 
    margin:10px; 
    background-color:#bada55; 
} 
.first, .third { 
    width:200px; 
} 
.second { 
    width:300px; 
} 

Các Codepen.

Các Lưới Way

Bạn có thể thực hiện điều này với grid bây giờ, quá, mặc dù browser support có thể là một vấn đề nếu bạn đang hỗ trợ các trình duyệt cũ.Đó là HTML tương tự như với ví dụ flexbox, chỉ với CSS khác nhau:

CSS

.container { 
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 1fr; 
    grid-column-gap: 10px; 
    width:700px; 
} 
.container > div { 
    background-color:#bada55; 
} 
.first, .third { 
    width:200px; 
} 
.second { 
    width:300px; 
} 

Các codepen.

Answer 2

Mã HTML là

<div id="wrapper"> 
    <div id="first">first</div> 
    <div id="second">second</div> 
    <div id="third">third</div> 
</div> 

CSS sẽ

#wrapper { 
    display:table; 
    width:100%; 
} 
#row { 
    display:table-row; 
} 
#first { 
    display:table-cell; 
    background-color:red; 
    width:33%; 
} 
#second { 
    display:table-cell; 
    background-color:blue; 
    width:33%; 
} 
#third { 
    display:table-cell; 
    background-color:#bada55; 
    width:34%; 
} 

Mã này sẽ WORKUP đối với bố cục đáp ứng vì nó sẽ thay đổi kích thước

<div> 

theo chiều rộng thiết bị. Ngay cả một lon im lặng ai

<div> 

như

<!--<div id="third">third</div> --> 

và có thể sử dụng phần còn lại hai cho hai

<div> 

cạnh nhau.