0

我对 CSS 完全陌生，而且很困惑，而且或多或少只是对浮动、位置或类似的东西感到沮丧。我会尽力解释

DIV1                 DIV2
DIV3 DIV4       

DIV5   DIV6   DIV7   DIV8
DIV9                 
                     DIV10

这就是我正在寻找的布局。我的试验和错误都搞砸了。我有 div1:float:left;div2:float:left div3:clear。到那时一切正常。我想让 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>
4

2 回答 2

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;
}
于 2012-09-12T16:12:58.967 回答
0

这是为您布置的网格，您可以看到我添加浮动/清除的位置： 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; }
于 2012-09-12T16:15:27.870 回答