Question

我对CSS完全不熟悉，并且感到困惑，或多或少只是对浮动，或职位或类似的东西感到沮丧。我会尽力解释一下

DIV1                 DIV2
DIV3 DIV4       

DIV5   DIV6   DIV7   DIV8
DIV9                 
                     DIV10

这就是我正在寻找的布局。我的反复试验都搞砸了。我有Div1：float：left; div2：float：left DIV3：清晰。到目前为止一切正常。我希望div4在div3旁边，然后是5,6,7,8，以清除3和4，然后在彼此旁边。有什么想法吗？我会说它的地狱，并确定一切的位置，但这也是令人沮丧的尝试找出位置。

我在这里添加了代码。这已经搞砸了，并且玩弄了。我有高度和宽度变量不是因为我需要它们，只是试着让事情适合

<style>

#div-1
{
    float:left;
    width:390px;
    height: 170px;

}
#div-2
{
    float:right;
    text-align:right;
    width:450px;
}
#div-3
{
    width:80px;
    height:60px;
    clear:left;
    text-align:left;
}
#div-4
{
    border:dashed 2px;
    float:left;
}
#div-5
{
    float:left;
    top:350px;
}
</style>

Answer 1

演示：http://jsfiddle.net/iambriansreed/uGRWY/

HTML：

<div class="wrap">
    <div class="DIV1">DIV1</div>
    <div class="DIV2">DIV2</div>
    <div class="DIV3">DIV3</div>
    <div class="DIV4">DIV4</div>
    <div class="DIV5">DIV5</div>
    <div class="DIV6">DIV6</div>
    <div class="DIV7">DIV7</div>
    <div class="DIV8">DIV8</div>
    <div class="DIV9">DIV9</div>
    <div class="DIV10">DIV10</div>
</div>
<pre>
DIV1                 DIV2
DIV3   DIV4
DIV5   DIV6   DIV7   DIV8
DIV9                 
                     DIV10
</pre>

CSS：

.wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #eee;
}
.wrap > div {
    position: relative;
    float: left;
    clear: none;
    background: #ccc;
    width: 25%;
}
.wrap > div.DIV1,
.wrap > div.DIV4 {    
    width: 75%;
}
.wrap > div.DIV9 {    
    width: 100%;
}
.wrap > div.DIV10 {
    float: right;
}

Answer 2

这是你的网格布局，你可以看到我添加浮动/清除的位置： http://codepen.io/mastastealth/pen/xyeli

HTML：

<div class="main">
  <div class="left">1</div>
  <div class="right">2</div>

  <div class="left clear-left">3</div>
  <div class="left">4</div>

  <div class="left clear-left">5</div>
  <div class="left">6</div>
  <div class="left">7</div>
  <div class="left">8</div>

  <div class="left">9</div>
  <div class="right clear-left">10</div>
</div>

CSS：

.main { width: 800px; }

.main div { 
  background: #abc123; text-align: center;
  line-height: 50px; width: 200px; 
  box-shadow: inset 0 0 1px #000;
  margin-bottom: 10px;
}

div.left { float: left; }
div.right { float: right; }

div.clear-left { clear: left; }

CSS浮动布局有明确的问题

2 个答案: