左浮動小数点の幅の要素を整列

Question

.block1左浮動要素の幅の合計に等しい幅に合わせて.elementを整列する必要があります。異なるスクリーンについては、1列に取り付けられた左に浮かぶ要素の数は異なることになり、それらの全幅も同じになる。.block1だから私はどのように要素を揃えるべきですか？

.element

.block1 { 
 
    width: 300px; 
 
    float: left; 
 
    background: #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.wrapper { 
 
    display: table; 
 
} 
 

 
.element { 
 
    float: right; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <h1 class="left">My Title</h1> 
 
    <div class="element">Element</div> 
 

 
    <div class="clear"></div> 
 

 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
</div>

は、右のブラウザの右側の境界線の近くに浮かべているが、私は .elementが異なる画面幅はこちら印刷画面上のように立つ必要があります。

Answer 1

ために、以下のCSSを使用することができますここでやっている。

コード参照してください。

.block1 { 
 
    width: 300px; 
 
    float: left; 
 
    background: #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.wrapper { 
 
    display: table; 
 
} 
 

 
.element { 
 
    float: right; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.left { 
 
    float: left; 
 
} 
 

 
@media only screen and (max-width: 679px) { 
 
    .parent { 
 
    width: 330px; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 680px) and (max-width: 980px) { 
 
    .parent { 
 
    width: 680px; 
 
    } 
 
}

<div class="wrapper"> 
 
    <h1 class="left">My Title</h1> 
 
    <div class="element">Element</div> 
 
    <div class="parent"> 
 
    <div class="clear"></div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    <div class="block1">Block</div> 
 
    </div> 
 
</div>

Answer 2

.wrapper { 
    display: table; 
    width:1020px; 
} 

あなたはラッパに幅の親divを与えることができます

Answer 3

あなたは、共通の親コンテナ内のすべてのあなたの.block1の要素を配置する必要があり、あなたは何を達成したい場合は、画面サイズを使用して.parentのwidthを変化させるためにmedia-queriesを使用して、この

.block1 { 
    display: inline-block; 
    vertical-align: top; 
    width: calc(33% - 20px); 
}