1

我正在尝试在 CSS 中创建一个 div，其目标是阻止其他对象出现在这个地方。我想知道我怎么能只用 CSS 做这样的事情。

我有我的第一个 div：

#Content
{
width:1000px;
height:773px;

margin-left:auto;
margin-right:auto;

position:relative;
}

第一个中有第二个：

#blocker
{
width:800px;
height:573px;

display:block;
position:absolute;

top:101px;
left:101px;
}

第一个 div 将被多个 div 自动填充，如下所示：

.element
{
width:100px;
height:100px;

display:inline-block;

margin:0;

border-style:solid;
border-width:1px;
border-color:grey;
}

问题是“元素”正在“阻止程序”下方，而我希望它跳到下一个可用位置。

我想要中间的东西，我希望元素显示在拦截器周围。

希望很清楚。我已经尝试了一个小时，但在网上没有找到任何东西

问候，

4

1 回答 1

2

示例 1：区域顶部、左侧、右侧和下方的浮动元素

此示例演示如何浮动一系列.elementdiv（方形块）以留下一个开放的矩形空间，块元素 ( #blocker) 可以绝对定位在该矩形空间上。

考虑以下HTML。我使用两个类来识别顶行中的最后一个元素 ( ) 和开放的矩形空间 ( ).start-skip右下角的最后一个元素。.end-skip

<div id="Content">
    <div id="blocker"></div>
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element start-skip">6</div>
    <div class="element">7</div>
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
    <div class="element">11</div>
    <div class="element">12</div>
    <div class="element">13</div>
    <div class="element end-skip">14</div>
    <div class="element">15</div>
    <div class="element">16</div>
    <div class="element">17</div>
    <div class="element">18</div>
    <div class="element">19</div>
    <div class="element">20</div>
    <div class="element">21</div>
    <div class="element">22</div>
    <div class="element">23</div>
</div>

现在，应用以下CSS：

#Content {
    width:600px;
    height:900px;
    margin-left:auto;
    margin-right:auto;
    border: 1px dotted gray;
    overflow: auto;
    position: relative;
}
#blocker {
    background-color: yellow;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 400px;
}
.element {
    width: 98px;
    height: 98px;
    float: left;
    margin:0;
    border-style:solid;
    border-width:1px;
    border-color:grey;
}
.start-skip ~ .element:nth-child(2n) {
    background-color: beige;
    margin-right: 400px;
}
.end-skip ~ .element:nth-child(2n) {
    background-color: transparent;
    margin-right: 0;
}

诀窍是使用~（相邻兄弟）和 nth-child()选择器（CSS3 的一部分）在将包围矩形空间的行中设置右边距。

规则.start-skip打开右边距，规则.end-skip将右边距重置为零。

最后，使用绝对位置将元素放置在和元素#blocker之间的空间上。.start-skip.end-skip

这种方法可以扩展为允许两个或更多元素位于矩形空间的左侧和右侧。

参见演示：http: //jsfiddle.net/audetwebdesign/QCYya/

示例 2：预定义区域右侧和下方的浮动元素

在这种情况下，块元素处于正常的内容流中，并且.element' 浮动在右侧和下方#blocker。

假设您的 HTML 如下：

<div id="Content">
    <div id="blocker"></div>
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    ...
</div>

应用以下 CSS：

#Content {
    width:1004px;
    height:773px;
    margin-left:auto;
    margin-right:auto;
    border: 1px dotted gray;
    overflow: auto;
}
#blocker {
    width:800px;
    height:573px;
    background-color: yellow;
    float: left;
}
.element {
    width:100px;
    height:100px;
    float: left;
    margin:0;
    border-style:solid;
    border-width:1px;
    border-color:grey;
}

您可以浮动所有元素，它们将堆叠在您正在寻找的布局中。

请记住，.element由于边框的原因，块的宽度和高度为 102px，并#Content相应地调整宽度。

或者，您可以将宽度/高度设置.element为 98px。

设置overflow: auto为#Contentand 可以防止浮动在 之前和之后环绕任何兄弟元素#Content。

参见演示：http: //jsfiddle.net/audetwebdesign/AXfA8/

于 2013-09-25T00:50:52.277 回答