ページ上にhtml divを配置しようとしています

divタグをページの中央に配置しようとしています（内容は関係ありません）。私はそれを行うことができ、ページはすばらしく見えるが、物事を正しく整列させるために、それは完全に任意のマージンと一緒に完全にハッキングされている。誰かが簡単な.cssソリューションを使って、添付されたイメージのような構造のページを取得することができますか？ページ上にhtml divを配置しようとしています

出典

2017-04-14 nikotromus

Flex。確実にフレックス。 –

フレックス・ベイビー;） – Mazz

cssグリッド。ブートストラップフレックスは普遍的ではありません（モバイルサファリ？） –

あなたはフレックスまたはグリッドレイアウトなしでプレーンなCSSを使用することができます。ブートストラップを使用した例を示します。

<div class="container"> 
    <div class="block row"></div> 
    <div class="clearfix row row2"> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    </div> 
    <div class="block row"></div> 
    <div class="clearfix row row4"> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    </div> 
</div> 

.block { 
    background: blue; 
    height: 30px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.row .col:first-child { 
    padding-left: 0; 
} 
.row .col:last-child { 
    padding-right: 0; 
} 
.row4 .col { 
    padding: 0 30px; 
}

ここにはjsfiddleがあります。

出典

2017-04-14 13:59:35 shaochuancs

清潔です.....ありがとうございました.... – nikotromus

@ shaochuancs - すべての高さを指定することなくこれを行う方法はありますか？これは、コンテンツを内部に置き、自動的にサイズを変更できるのであれば完璧です。 – nikotromus

はい、 '.block'の高さは内容によって動的に決めることができます。https://jsfiddle.net/cshao/j6xsrucm/7/を確認してください。ブロックを水平に整列させるために '.block'に' height：100％ 'を使用しています。 – shaochuancs

パーセントの幅をfloatというプロパティに関連付けて使用して、必要な処理を行うことができます。

フロート：たとえばhttps://www.w3schools.com/css/css_float.asp

：

HTML：

<div class="header"></div> 
<div class="second-container"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div> 
<div class="third-container"> 
</div> 
<div class="fourth-container"> 
    <div class="left"> 
    </div> 
    <div class="middle"> 
    </div> 
    <div class="right"> 
    </div> 
</div>

CSS：

.header{ 
    width:90%; 
    height:50px; 
    margin:5%; 
    background-color:blue; 
    } 

    .second-container{ 
    height:80px; 
    width:90%; 
    margin:5%; 
    } 

    .second-container .left{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .second-container .right{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .third-container{ 
    height:50px; 
    width:90%; 
    background-color:blue; 
    margin:5%; 
    } 

    .fourth-container{ 
    height:70px; 
    width:90%; 
    margin:5%; 
    } 

    .fourth-container .left{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .middle{ 
    background-color:blue; 
    height:100%; 
    width:30%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .right{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    }

もちろん、あなたが望む方法を調整したい場合は、マージンの値で遊ぶことができます。あなたがそれを見栄えにしたいならば、同じ行のために合計で100％を持つことを世話してください。

JSFiddleここ：https://jsfiddle.net/zg1u2dnu/

出典

2017-04-14 14:01:34 Driblou

うーん...この結果を得るために多くの方法があります。あなたは純粋なHTML/CSSでそれをしたい場合は、フレキシボックスは、おそらく最も便利なソリューションです：

#wrapper { 
 
    width: 85%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper > div { 
 
    margin: 10px; 
 
} 
 

 
.blue { 
 
    background-color: #4F81BD; 
 
} 
 

 
#top, #middle-bottom { 
 
    height: 100px; 
 
} 
 

 
#middle-top, #bottom { 
 
    height: 180px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#middle-top > div { 
 
    width: 45%; 
 
} 
 

 
#bottom > div { 
 
    width: 30%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Flexbox demo</title> 
 
</head> 
 
<body> 
 
    <div id="wrapper"> 
 
    <div id="top" class="blue"></div> 
 
    <div id="middle-top"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    <div id="middle-bottom" class="blue"></div> 
 
    <div id="bottom"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

すべてで期待どおりしかし、バニラJSのように、これは動作しません。 Webブラウザ... Bootstrap、Foundation、Semantic UIなどのフロントエンドフレームワークを使用して最適な結果を得ることをお勧めします。

出典

2017-04-14 14:19:40 Badacadabra

ページ上にhtml divを配置しようとしています

答えて

関連する問題