Jak mogę wyrównać dwa elementy div w poziomie?

muszę wyrównać dwa DIV obok siebie, tak, że każda zawiera tytuł i listę elementów, podobny do:Jak mogę wyrównać dwa elementy div w poziomie?

<div> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div>

To niezwykle łatwe do zrobienia z tabel, ale nie chcą używaj tabel. Jak mogę to osiągnąć?

Źródło

2010-03-10 DaveDev

float div w kontenerze nadrzędnym i styl to tak:

.aParent div { 
 
    float: left; 
 
    clear: none; 
 
}

<div class="aParent"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Źródło

2010-03-10 13:24:30 Robusto

Jeśli dasz elementu pływaka, to jest zbędne w najlepszym wypadku również nadać mu 'jasne: none'. –

Ta odpowiedź została udzielona, gdy niektóre starsze przeglądarki nie zawsze wymuszały "clear: none" z float. – Robusto

owinąć je zarówno w pojemniku tak:

.container{ 
 
    float:left; 
 
    width:100%; 
 
} 
 
.container div{ 
 
    float:left; 
 
}

<div class='container'> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Źródło

2010-03-10 13:26:15 Brant

Sam pojemnik nie musi być pływający. –

Musisz float the divs w wymaganym kierunku, np. left lub right.

Źródło

2010-03-10 13:26:27 Sarfraz

-1

<html> 
<head> 
<style type="text/css"> 
#floatingDivs{float:left;} 
</style> 
</head> 

<body> 
<div id="floatingDivs"> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div id="floatingDivs"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

</body> 
</html>

Źródło

2010-03-10 13:27:46

Identyfikator może być użyty tylko jeden raz. –

<div> 
<div style="float:left;width:45%;" > 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div style="float:right;width:45%;"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 
<div style="clear:both; font-size:1px;"></div> 
</div>

Przezroczysty należy stosować tak, aby zapobiec błąd float (wysokość wypaczenia zewnętrznej Div).

style="clear:both; font-size:1px;

Źródło

2010-03-10 13:27:58 coderex

Co robi końcowy zagnieżdżony element div? Dlaczego "jasne: oba"? dlaczego 'font-size: 1px'? – Cheeso

Aby wyczyścić pływaki. Wierzę, że "font-size: 1px" jest rzeczą kompatybilną z IE. Mogę się mylić. –

Dodaj klasę do każdego z div:

.source, .destination { 
 
    float: left; 
 
    width: 48%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.source { 
 
    margin-right: 4%; 
 
}

<div class="source"> 
 
    <span>source list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div> 
 
<div class="destination"> 
 
    <span>destination list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div>

To ogólna procentowe rozwiązanie - wykorzystanie szerokości piksela oparte jest zwykle znacznie bardziej wiarygodne. Prawdopodobnie będziesz również chciał zmienić różne rozmiary marginesów/dopełnień.

Można też ewentualnie owinąć HTML w div pojemnika i używać tej CSS:

.container { 
    overflow: hidden; 
}

To zapewni późniejsze treść nie owinąć wokół elementów pływających.

Źródło

2010-03-10 15:16:00 DisgruntledGoat

-1

Dla celów, wolałbym przy użyciu pozycji zamiast pływających:

http://jsfiddle.net/aas7w0tw/1/

Użyj rodzica ze względnym położeniu:

position: relative;

i dzieci w pozycji absolutnej:

position: absolute;

W dodatku, możesz lepiej jeździć w wymiarze z twoich komponentów.

Źródło

2015-05-27 12:38:58

jeśli masz dwie div, można to wykorzystać, aby wyrównać DIV obok siebie w tym samym rzędzie:

#keyword { 
 
    float:left; 
 
    margin-left:250px; 
 
    position:absolute; 
 
} 
 

 
#bar { 
 
    text-align:center; 
 
}

<div id="keyword"> 
 
Keywords: 
 
</div> 
 
<div id="bar"> 
 
    <input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40> 
 
    <input type = button name="go" Value="Go ahead and find" onClick="search()"> 
 
</div>

Źródło

2015-08-28 20:51:15

Obecnie możemy korzystać z niektórych flexbox aby wyrównać te divs.

.container { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 

 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Źródło

2016-07-19 22:10:44

Dzięki, nie znałem 'display: flex'. Dodano link, aby ludzie mogli łatwo zobaczyć tło CSS3. – akauppi

Jak mogę wyrównać dwa elementy div w poziomie?

Odpowiedz

Powiązane problemy