外部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打破清单浮动？

回答

相关问题