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