Html i CSS Jak wyrównać 3 divy obok siebie?

Question

Mam 3 elementy div, 200px, 300px i 200px jak mogę je ustawić obok siebie, wszystkie przykłady, które widziałem, obejmują tylko 2. Mam Div1, Div2 working poprawnie ale div3 dla niektórych slajdach rozum pod Div1 leżą ten obraz

to jest mój kod

<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> 

Div1 ma krótszą treści w nim, w jaki sposób można uczynić granicę na prawo jako długo jak w granicy Div2, dzięki za każdą pomoc.

Answer 1

Wszystkie elementy w jednej linii

zawinąć div elementy w opakowaniu:

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

następnie ustawić szerokość owijki, i pływak wszystkie trzy 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; 
} 

Używaj też identyfikatorów i/lub klas i zachowaj CSS oddzielnie od kodu HTML. Ułatwia to czytanie i utrzymywanie kodu.

The fiddle.

Wszystkie elementy w jednej linii, tej samej wysokości

Aby osiągnąć „samą wysokość” część, można użyć display:table, display:table-row i display:table-cell uzyskać dopasowania wysokości. Wykorzystuje dodatkowy div, więc HTML wygląda następująco:

<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> 

Pływaki mogą być następnie usuwane, więc CSS wygląda następująco:

#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; 
} 

fiddle.

schematu flexbox Way

Jeśli wspieranie tylko nowszych przeglądarek (IE 10 i więcej), schematu flexbox to kolejny dobry wybór. Upewnij się, że prefiks zapewnia lepszą obsługę. Więcej na temat prefiksów można znaleźć 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; 
} 

Codepen.

The Grid Way

Można to osiągnąć z grid teraz też, choć browser support może być problemem, jeśli jesteś wspierania starszych przeglądarek.To ten sam HTML, jak na przykładzie schematu flexbox, tylko z innym CSS:

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; 
} 

codepen.

Answer 2

Kod HTML jest

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

CSS będzie

#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%; 
} 

Ten kod obróbce w kierunku układu reagującego jak to zmienić rozmiar

<div> 

według szerokości urządzenia. Nawet jedna puszka milczy ktoś

<div> 

jak

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

i może wykorzystywać dwa odpoczynku dla dwóch

<div> 

obok siebie.