29

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

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

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

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

CSS

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

HTML

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

& # X200B;

  • Error: User Rate Limit Exceeded

    от Jonathan Wood
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit ExceededFiddle : jsfiddle.net/rhEyM/10

    от Jignesh Rajput
  • 9

    left-div {

    Try this : (Error: User Rate Limit Exceeded)

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

    Hints :

    Just use float:left in your left-most div only. No real reason to use height, but anyway... Good practice to use <div 'clear:both'>&nbsp;</div> after your last div.

  • 20

    Error: User Rate Limit Exceeded

  • 26

    Error: User Rate Limit Exceeded

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