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 に答える