Вопрос по css-float, css, html – Дисплей два <div> с бок о бок

29

Моя цель - показать два<div>s бок о бок с содержанием от обоих<div>выровнены по верху. Я не хочу длинный текст во втором<div> обернуть под первым.

Наконец, я не хочу устанавливать ширину второго<div> потому что мне нужна разметка для работы с разной шириной.

Пример разметки ниже и наhttp://jsfiddle.net/rhEyM/.

CSS

<code>.left-div {
    float: left;
    width: 100px;
    height: 20px;
    margin-right: 8px;
    background-color: linen;
}
.right-div {
    float: left;
    margin-left: 108px;
    background-color: skyblue;
}​
</code>

HTML

<code><div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line
    up at the top, <b>[B]</b> Long text in right-div should not wrap
    underneath left-div, and <b>[C]</b> I do not want to specify a
    width of right-div. I don't want to set the width of right-div
    because this markup needs to work within different widths.
</div>
</code>

& # X200B;

я обновил ваш Fiddle : Jsfiddle.net / rhEyM / 10 Jignesh Rajput

Ваш Ответ

3   ответа
26

http: //jsfiddle.net/maxspan/1b431hxm

<div id="row1">
    <div id="column1">I am column one</div>
    <div id="column2">I am column two</div>
</div>

#row1{
    display:flex;
    flex-direction:row;
justify-content: space-around;
}

#column1{
    display:flex;
    flex-direction:column;

}


#column2{
    display:flex;
    flex-direction:column;
}
Я думаю, что это лучшее решение, даже если я знаю, что оно не работает каждый раз (старые браузеры и CSS3). Но это дает вам больше гибкости в отношении высоты div. r00tandy
20
D'ах! Ты совершенно прав. В моем реальном проекте я не устанавливал поля слева от правого элемента. Это все, что нужно. Благодарность Jonathan Wood
9

Попробуй это (http: //jsfiddle.net/TpqVx)

.    float: left;
    width: 100px;
    /*height: 20px;*/
    margin-right: 8px;
    background-color: linen;
}
.right-div {

    margin-left: 108px;
    background-color: lime;
}​​
<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'>&nbsp;</div>

Подсказки:

Просто используйтеfloat:left в твоем левом диветольк. Нет реальной причины использоватьheight, но все таки.. Хорошая практика для использования<div 'clear:both'>&nbsp;</div> после твоего последнего div.
Любая причина, почему «последний: оба» должны использоваться после последнего div? (Почему это хорошая практика?) Raj Pawan Gumdal

Похожие вопросы