外部div打破清單浮動？

我有一個浮動內部div的股利（這也可以是一個ul與浮動li裏面）。外面我有一個與id="break"股利。外部div打破清單浮動？

你可以在這裏看到：http://jsfiddle.net/GM09D/vrnfG/

的事情是，我需要休息div飄起了包裹裏面div。也就是說，當包裝DIV中的div將定位與突破div，他們將打破和漂浮突破div，像你這個圖像中看到：

Example

這可能嗎？

用戶希望斷路器div影響1到10 div的佈局。

<div id="wrap"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
</div> 
<div id="breaker"></div>

來源

2011-11-28 GuyLev

不，那是不可能的當前的HTML語法。根據標記，這兩個區域完全無關。一個元素永遠不會影響以前的兄弟姐妹的孩子的佈局。

來源

2011-11-28 22:45:43 mrtsherman

你不需要斷路器DIV，順便說一句，你只需將它移動到包裝的div並添加clear:left

來源

2011-11-28 22:49:30 Simone

您當然可以，達到這個使用jQuery：http://jsfiddle.net/vrnfG/13/

我所做的就是添加第二行上每個元素的上邊距。不完全確定你想要做什麼，我敢肯定這段代碼並不是你所需要的，但是如果你想要沿着這條路線走下去，它會讓你走上正軌。

來源

2011-11-28 23:07:27 Godwin

這可以並且應該在沒有jQuery的情況下完成。佈局需要在沒有客戶端腳本的情況下工作，並且當然沒有大型腳本庫。 – PointedEars

@PointedEars：我承認不同意，是的，儘可能使用css而不是jQuery，但有時它是完成任務的唯一方式，而且它是一種穩定的方式。目前還不清楚OP究竟想要達到什麼樣的效果，如果他/她控制了html的輸出，那麼是的，當然輸出適當的html。我個人並沒有這種印象。 – Godwin

請參閱我的答案，瞭解如何完成。 – PointedEars

我想出了this：

#wrap { 
    width:400px; 
    border:1px solid black; 
    overflow:auto; 
    margin:auto; 
} 

#wrap div { 
    width:50px; 
    height:50px; 
    margin:10px; 
    float:left; 
    border:1px solid pink; 
} 

#wrap div + .breaker { 
    width:350px; 
    height:50px; 
    border:1px solid blue; 
    margin-left:25px; 
}

而且你的HTML：

<div id="wrap"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div class="breaker"></div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
</div>

通知同級選擇我用CSS使用。現在我們將breaker div放在wrap div內，並用兄弟選擇器選擇它。 #wrap div + #breaker選擇在wrap div內的任何div之前的id爲breaker的任何div。所以它繼續設計粉紅色的邊框格，但也會找到破碎機格式並相應地設計它們。

來源

2011-11-28 23:26:10 Purag

您不應該使用相同的ID兩次。將斷路器更改爲一個班級。 – mrtsherman

@ mrtsherman：很好。不敢相信我忽略了這一點！：P – Purag

顯然，你知道所有的尺寸，所以它是非常簡單的：

#wrap { 
    position: relative; 
    margin: auto; 
    width: 400px; 
    border: 1px solid black; 
    overflow: auto; 
} 

#wrap div { 
    float: left; 
    width: 50px; 
    height: 50px; 
    margin: 10px; 
    border: 1px solid pink; 
} 

#breaker { 
    position: absolute; 
    left: 15px; 
    top: 55px; 
    width: 350px !important; 
    height: 50px !important; 
    border: 1px solid blue !important; 
} 

.first-row { 
    margin-bottom: 50px !important; 
}

和

<div id="wrap"> 
    <div class="first-row">1</div> 
    <div class="first-row">2</div> 
    <div class="first-row">3</div> 
    <div class="first-row">4</div> 
    <div class="first-row">5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
    <div id="breaker"></div> 
</div>

見http://jsfiddle.net/PgMWJ/1/

然而，因爲這看起來像一個畫廊，我覺得你的相鄰div元素真的應該是li元素，它們應該是子元素的一個ul el EMENT。

來源

2011-11-29 00:58:55 PointedEars

外部div打破清單浮動？

回答

相關問題