2017-04-17 16 views
1

私の1つのdivに前のdivと同じ高さを持たせたいと思います。私は、幅と高さのパーセンテージを使用しています(モバイルデバイスでもうまくいくように見えます)。親要素を幅と高さに100%設定しようとしました(フォーラムのいくつかの投稿で見ましたが、作品)私はまた、ディスプレイ使用して試してみた:。。テーブルのセルを、そしてそれはまた、動作しませんでしたがこれはどのように私のセットアップルックス:divを私の以前のdiv兄弟と同じ高さにするには

のindex.php:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "UTF-8"/> 
     <title>SiteTitle</title> 
     <link rel = "stylesheet" type = "text/css" href = "styles/index.css"/> 
    </head> 
    <body> 
     <div id = "allContent"> 
      <div id = "header"> 
       <div id = "siteLogo"> 
        <h1 id = "title">Site_Title</h1> 
       </div> 
       <div id = "shortMenu"> 
        <a href = "#">Login</a> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

index.css:

body { 
    background-color: rgb(0, 0, 0); 
    margin: 0px; 
    padding: 0px; 
    color: rgb(192, 74, 0); 
} 

div#allContent { 
    width: 80%; 
    margin: auto; 
} 

div#allContent div#header { 
    margin: 0px; 
    padding: 0px; 
} 

div#allContent div#header div#siteLogo { 
    margin: 0px; 
    padding: 0px; 
    width: 70%; 
    border: 1px solid blue; 
    float: left; 
} 

div#allContent div#header div#siteLogo h1#title { 
    margin: 0px; 
    padding: 0px; 
    font-size: 300%; 
    font-family: Sans-Serif; 
} 

div#allContent div#header div#shortMenu { 
    width: 20%; 
    border: 1px solid green; 
    float: left; 
} 

div#allContent div#header div#shortMenu a { 
    font-family: Sans-Serif; 
    color: rgb(204, 204, 204); 
    text-decoration: none; 
} 

わからない今チェックするためにどのような.. は、私は基本的にの下部をしたいですリンク先のウェブサイトのタイトルの下に並んでください。私はおそらくそれを後でロゴイメージに変更する予定なので、高さが変わる可能性があり、道路を何度も変更すると値を変更する必要はありません。今すぐLoginリンクがページの上部にあります。

編集:私は、次のコード行を追加し、それは、それぞれが、私は、次のセレクタを変更し、50%

div#allContent div#header { 
    margin: 0px; 
    padding: 0px; 
    display: flex; 
} 

div#allContent div#header div { 
    flex: 1; 
} 

答えて

1

、このCSSコード

を交換display:flex

を使用してdisplay:table-cell

body { 
 
    background-color: rgb(0, 0, 0); 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: rgb(192, 74, 0); 
 
} 
 

 
div#allContent { 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 

 
div#allContent div#header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 

 
div#allContent div#header div#siteLogo h1#title { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-size: 300%; 
 
    font-family: Sans-Serif; 
 
} 
 

 

 
div#allContent div#header div#shortMenu a { 
 
    font-family: Sans-Serif; 
 
    color: rgb(204, 204, 204); 
 
    text-decoration: none; 
 
} 
 
div#allContent div#header div#shortMenu { 
 
    width: 30%; 
 
    border: 1px solid green; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
div#allContent div#header div#siteLogo { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 70%; 
 
    border: 1px solid blue; 
 
    display: table-cell; 
 
} 
 
div#allContent div#header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    display: table; 
 
}
<div id = "allContent"> 
 
      <div id = "header"> 
 
       <div id = "siteLogo"> 
 
        <h1 id = "title">Site_Title</h1> 
 
       </div> 
 
       <div id = "shortMenu"> 
 
        <a href = "#">Login</a> 
 
       </div> 
 
      </div> 
 
     </div>

を使用して

このコードを試してみてください

div#allContent div#header div { 
    flex: 1 auto; 
} 

body { 
 
    background-color: rgb(0, 0, 0); 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: rgb(192, 74, 0); 
 
} 
 

 
div#allContent { 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 

 
div#allContent div#header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div#allContent div#header div#siteLogo { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 70%; 
 
    border: 1px solid blue; 
 
    float: left; 
 
} 
 

 
div#allContent div#header div#siteLogo h1#title { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-size: 300%; 
 
    font-family: Sans-Serif; 
 
} 
 

 
div#allContent div#header div#shortMenu { 
 
    width: 20%; 
 
    border: 1px solid green; 
 
    float: left; 
 
} 
 

 
div#allContent div#header div#shortMenu a { 
 
    font-family: Sans-Serif; 
 
    color: rgb(204, 204, 204); 
 
    text-decoration: none; 
 
} 
 
div#allContent div#header { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: flex; 
 
} 
 

 
div#allContent div#header div { 
 
    flex: 1 auto; 
 
}
<div id = "allContent"> 
 
      <div id = "header"> 
 
       <div id = "siteLogo"> 
 
        <h1 id = "title">Site_Title</h1> 
 
       </div> 
 
       <div id = "shortMenu"> 
 
        <a href = "#">Login</a> 
 
       </div> 
 
      </div> 
 
     </div>

+0

私はフレックススタイルを考え出したが、私は、私はもう少しコントロールを持って感じるように私はより良い表のセルを使用して好きです。私が前に何をしようとしていたのか分かりませんが、それは機能します私はCSSをもう一度見なければなりません。それは3〜4年ほど前です。 – Vince

+0

乾杯....... :) – Amal

0

の幅をDIV与えました。表示されることに注意してください:インラインブロック。可能性のあるバグを防ぐためです。また、私は簡潔さのためにベンダーのプレフィックススタイルを含んでいませんでした。

div#allContent div#header div { 
    flex: 1; 
    display: inline-block; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
関連する問題