html - 2 つの div を並べて配置できない

Question

さて、StackOverflow でこれに似た質問がいくつかあることは知っていますが、それらは既に回答されていますが、役に立ちませんでした。

私はメッセージングサービスを構築しています。そのために、contacts_box(300px) とmessage_box(500px) の 2 つの div があります。それらは両方ともにある親の中にラップされていdivます。これらの 2 つを親の中に並べて表示します。しかし、私が何をしても、それらを整列させることはできません!800pxwidthaligndivsdiv

私の HTML と CSS を見て、どこが間違っているのか教えてください。

* {
    margin: 0;
    padding: 0;
}
.page_layout {
    position: fixed;
    top: 50px;
    width: 100%;
    height: 100%;
    border: 1px solid green;
}
.page_container {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    clear: both;
    border: 1px solid blue;
}
// Contacts Box and its elements  
.contacts_box {
    float:left;
    height:100%;
    width:300px;
    border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
    float:right;
    height:100%;
    width:500px;
    border:1px dashed lemonchiffon;
}

<html>
  <head>
   <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>
<body>
<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box"> CONTACTS BOX </div>
    <div class="message_box">
      <div class="message_displayBox"> Message Box </div>
      <div class="message_textBox"> </div>
    </div>
  </div>
</div>
</body>
</html>

score 4 · Accepted Answer

box-sizing幅と境界線の幅を計算するのではなく、問題を解決するために使用できます。

box-sizing: border-box内側の容器と外側の容器に追加してbox-sizing: content-boxください。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
  box-sizing: content-box;
}
 .contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  border: 1px dashed magenta;
}
 .message_box {
  float: right;
  height: 100%;
  width: 500px;
  border: 1px dashed lemonchiffon;
}

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

score 1 · Accepted Answer

コメントを入れてください/* Comments Goes Here */

幅pxを変更して、フローティング div%を使用します。box-sizing: border-box;

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

.contacts_box
{
  float:left;
  height:100%;
  width:40%;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:60%;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

<div class="page_layout">
    <div class="page_container">
        <div class="contacts_box">
            CONTACTS BOX
        </div>
        <div class="message_box">
            <div class="message_displayBox">
                Message Box
            </div>
            <div class="message_textBox">
            </div>
        </div>
    </div>
</div>

score 1 · Accepted Answer

問題: 両方の要素 (.contact_boxおよび.message_box) に境界線があり、それぞれの側から 1 ピクセルを取っているため、十分なスペースがないため、それらが収まることはありません。box-sizing:border-box;この場合はプロパティを使用することをお勧めします。境界線が配置されます。外側ではなく要素のはめ込みなので、それらについて心配する必要はありません。

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

また、純粋な css (プリプロセッサなし) を使用している場合は、このようなコメントを使用して/* Comment */問題を回避してください。

score 0 · Accepted Answer

フロートの使用をやめて、フレックスを使用する必要があります!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.page_container {
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid blue;
}

.contacts_box {
  flex: 1 0 300px;
  border: 1px dashed magenta;
}

.message_box {
  flex: 1 0 500px;
  border-left: 1px dashed lemonchiffon;
}

<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box">
      CONTACTS BOX
    </div>

    <div class="message_box">
      <div class="message_displayBox">
        Message Box
      </div>

      <div class="message_textBox">
      </div>

    </div>
  </div>
</div>

score 0 · Accepted Answer

コメント方法が間違っていました。バニラ CSS で -/* Your comment */ コメントを作成するために使用します。

//- LESS、SASS、Stylus などのプリプロセッサでサポートされています。

ブラウザでコードを実行すると、contactbox と messagebox の CSS がどれも機能していないことがわかります。

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

/* Contacts Box and its elements */

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
}

/* Message Box and its elements */

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
}

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  
  <body>
    <div class="page_layout">
				<div class="page_container">
					<div class="contacts_box">
						CONTACTS BOX
					</div>
				
					<div class="message_box">
						<div class="message_displayBox">
							Message Box
						</div>
						
						<div class="message_textBox">
						</div>
						
					</div>
				</div>
			</div>

  </body>
</html>

score 0 · Accepted Answer

内側のDIVに境界線を指定して、実際の幅も追加します。可能であれば、内側のDIVに色を付けるか、親 DIVの幅を広げます。

* {
  margin: 0;
  padding: 0;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
}
.contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  background: blue;
}
.message_box {
  float: right;
  height: 100%;
  width: 500px;
  background: red;
}

<html>

<head>
  <link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

</html>

注: コードは正しいですが、CSS で間違ったコメントを付けています。それが機能しない理由です。CSS部分のコメントを確認してください。ここで、コメントを削除してコードを更新します。その正常に動作します。

アップデート

また、box-size:border-boxの外側 DIV とbox-size:content-boxを内側の DIV に使用することもできます。この方法でも解決できます。

score -1 · Accepted Answer

width:300px と border:1px のコンテナ全体の幅は 301px です。幅を 299px に変更するか、802px をより大きなボックスにしてみてください

score -2 · Accepted Answer

<html>
  <head>
    	<style>

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;

}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid green;
}

#contacts_box
{
  float:left;
  height:100%;
  width:300px !important;
  background-color:#f9dada !important;
}


#message_box
{
  float:left;
  height:100%;
  width:500px;
  background-color:#deffe5;
}
</style>
  </head>  
  
  <body>
    <div class="page_layout">
				<div class="page_container">
					<div id="contacts_box">
						CONTACTS BOX
					</div>
				
					<div id="message_box">
						Message Box
						
					</div>
				</div>
	</div>

  </body>
</html>

html - 2 つの div を並べて配置できない

10 に答える 10

Related

Reference