1

好的，所以我知道 StackOverflow 上有一些与此类似的问题已经得到解答，但它们并没有帮助我。

我正在构建一个消息服务，为此我有两个 div，contacts_box（300px）和message_box（500px）。它们都被包裹在一个div位于. 我希望这两个在 parent 内并排。但无论我做什么，我都无法让它们对齐！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>

4

10 回答 10

4

您可以使用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>

于 2016-09-02T05:24:24.267 回答
2

最基本的解决方案：div的边框不包含在宽度中。所以你要么需要计算宽度

width1 + border1 + width2 + border2 = 800px

或使您的容器 div 更大。

于 2016-09-02T05:16:36.670 回答
1

把你的评论放在里面/* Comments Goes Here */

将您的宽度更改px为%并使用box-sizing: border-box;浮动 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: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>

于 2016-09-02T05:25:19.647 回答
1

问题： 您在两个元素（.contact_box和.message_box）中都有边框，并且它们从每一侧取 1px，因此它们永远不会组合在一起，因为没有足够的空间，我建议您在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 */来避免问题。

于 2016-09-02T05:27:06.340 回答
0

你的评论方法是错误的。在 Vanilla 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>

于 2016-09-02T05:22:59.733 回答
0

您为内部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。您也可以使用此方法解决它。

于 2016-09-02T05:28:56.627 回答
0

我们必须停止使用浮点数并开始使用 flex！

* {
  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>

于 2016-09-02T06:38:24.793 回答
-1

您的宽度：300px 和边框：1px 的容器整体宽度为 301px。尝试将宽度更改为 299px 或将 802px 设置为更大的框

于 2016-09-02T05:17:49.573 回答
-1 
<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  <style>
*{
    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: 298px;
     border: 1px dashed magenta;
}


.message_box {
    float: right;
    height: 100%;
    width: 498px;
     border: 1px dashed lemonchiffon; 
}
</style>
  <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>
</html>

如果要添加边框，则将宽度减小相同的像素，就像将它们设置为 498 和 298 px res 一样。

于 2016-09-02T05:20:04.997 回答
-2 

<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>

于 2016-09-02T05:36:25.453 回答