CSS：如何使這種佈局？

|---| |---| 
| | | | 
|---| | | 
     | | 
     | | 
     | | 
     |---|

我要讓左格float:left，但隨後會顯示如下：CSS：如何使這種佈局？

|---| |---| 
| | | | 
|---| | | 
| | 
| | 
| | 
|---|

右欄將圍繞浮動元素包裹。這不是我想要的。

一個可能的解決方案是使用Bootstrap的網格系統。但我想左元素具有原始寬度（如H1標籤的寬度），而不是從電網給予類似的spanX

另一種解決方案是設置正確的元素margin-left的寬度，將其設置爲一個固定值。但是，左元素寬度不應該是給定的值，而應該是靈活的。

來源

2014-02-10 cqcn1991

你可以div的內圍列和他們都浮到左邊。

來源

2014-02-10 04:57:01

嘗試左節爲浮動：左&右節爲浮動：右。可能這會幫助你。

Example: 
.leftSection { 
    float: left; 
    width: 50%; 
} 
.rightSection { 
    float: right; 
    width: 50%; 
}

或去爲這一個：

<div style="float:left"> 
    <div style="float:left"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div style="float:right"> 
    <p>Lorem ipsum</p> 
    <p>Lorem ipsum</p> 
    </div> 
</div> 
<div style="float:right"> 
    <p>Lorem ipsum</p> 
    <p>Lorem ipsum</p> 
</div>

來源

2014-02-10 04:56:01 RealDeepak

但是我會在這兩者的右邊有其他元素。所以float：right不是一個好的選擇 – cqcn1991

你能不能給我演示你的代碼在小提琴中。 – RealDeepak

<div class="main-content"> 
    <div class="your-problem float-left"> 
     <div class="tiny-small-floating-left float-left"> 
     </div> 
     <div class="float-right"> 
     </div> 
    </div> 
    <div class="other-elements-to-right float-right"> 
    </div> 
</div>

我只是試圖展示一些浮動的東西。希望，這會有所幫助。

來源

2014-02-10 05:05:22 TNC

CSS：如何使這種佈局？

回答

相關問題