在html / css中使用浮點數

Question

我正在制作帶有小部件的儀表板。 我希望有兩種大小的小部件（大和小）。 我曾想過，如果將大號控件向左浮動，小號控件向右浮動，則它們將填滿屏幕，但按我的預期無法正常工作。

我要實現的目標：

我得到的是：

我的密碼

CSS

.l, .r{
    border:1px solid gray;
}

.l{
    float:left;
    width:200px;
}

.r{
    float:right;
    width:100px;
}

HTML

<div style='width:320px;'>
    <div class='l'>left1<br />second line</div>
    <div class='r'>right1</div>
    <div class='l'>left2</div>
    <div class='r'>right2</div>
    <div class='r'>right3</div>
    <div class='r'>right4</div>
    <div class='r'>right5</div>
    <div style='clear:both;'></div>
</div>

http://jsfiddle.net/vader88/s0gk83t4/

我確實意識到，如果我將dom2的right2放在left2之前，它將固定當前布局，但是我希望它比此更具動態性，並且無論任何小部件的高度如何都可以正確填充屏幕。

Answer 1

由於您希望輔助窗口小部件元素包裹整個主要窗口小部件元素，因此建議您將所有剩余的窗口小部件放在一個div中。 然后將所有輔助小部件浮動到右側。 這將使尾隨的輔助小部件如您的示例中那樣排列。 輔助窗口小部件的堆棧仍然有一些問題需要解決（請參閱jsfiddle），但是基本概念應該起作用。

<div class='container'>
    <div class="main-widget-area">
        <div class="main-widget">left1<br />second line</div>
        <div class="main-widget">left2</div>
    </div>    
    <div class="secondary-widget">right1</div>    
    <div class="secondary-widget">right2</div>
    <div class="secondary-widget">right3</div>
    <div class="secondary-widget">right4</div>
    <div class="secondary-widget">right5</div>
</div>

然后，css如下所示：

.container {
    width: 320px;
}

.main-widget-area {
    width: 215px;
    float: left;
}
.main-widget{
    border:1px solid gray;
    width:200px;
}

.secondary-widget{
    float:right;
    width:100px;
    border:1px solid gray;
}

http://jsfiddle.net/s0gk83t4/8/

Answer 2

您只需將div的右1,2,3,4放到新的div中，然后將div浮動到左側即可簡單地實現