外部div打破列表浮动？

Question

我的div中有一个浮动div的div（也可以是ul，其中包含浮动li。外面我有一个id="break"的div。

您可以在此处查看：http://jsfiddle.net/GM09D/vrnfG/

问题是我需要让break div在wrap div内浮动。也就是说，当换行div中的div将使用中断div定位时，它们将在中断div处中断并浮动，就像您在此图中看到的那样：

这可能吗？

用户希望断路器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>

Answer 1

不，使用您当前的html语法是不可能的。根据标记，这两个区域完全不相关。元素永远不会影响前兄弟孩子的布局。

Answer 2

你不需要破坏者div，BTW你可以将它移动到包裹div并添加clear:left

Answer 3

您当然可以使用jQuery实现此目的：http://jsfiddle.net/vrnfG/13/

我所做的是为第二行的每个元素添加上边距。我并不完全确定你要做的是什么，我确信这段代码不是你所需要的，但是如果你想沿着这条路走下去，那么它应该让你走上正轨。

Answer 4

我想出了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在breaker div中的任意div之前选择任何ID为wrap的div。因此它继续为粉色边框div设置样式，但也会找到断路器div并相应地设置它们的样式。

Answer 5

显然你知道所有尺寸，所以它很简单：

#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元素的子元素。