无法并排排列两个div

时间：2016-09-02 05:09:52

标签： html css css-float css-position box-sizing

好的，所以我知道在StackOverflow上有一些与此相似的问题已经得到了解答，但是他们没有帮助我。

我正在构建一个消息服务，为此我有两个div，contacts_box（300px）和message_box（500px）。它们都包含在div中800px的父width内。我想在父align内并排divs这两个div。但无论我做什么，我都无法让它们对齐！

请查看我的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>

10 个答案:

答案 0 :(得分：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>

答案 1 :(得分：2)

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

CREATE OR REPLACE PROCEDURE  funinsertupdateproduct(i_productid integer, t_productname text, t_productdesc text, i_brandid integer, i_varianceid integer, i_packsizeid integer, i_clientid integer, i_userid integer ,out i_prodid integer)
    AS

BEGIN 
    IF EXISTS (SELECT 1 FROM  "product" WHERE product_id = i_productid) THEN
        UPDATE "product" SET "product_name" = t_productname,  "product_desc" = t_productdesc, "brand_id"=i_brandid,variance_id=i_varianceid,pack_size_id=i_packsizeid  WHERE product_id = i_productid;
        i_prodid:=i_productid;
    ELSE
        INSERT INTO "product"("product_name", "product_desc", "create_by","client_id",variance_id,brand_id,pack_size_id ) VALUES (  t_productname, t_productdesc,i_userid,i_clientid,i_varianceid,i_brandid,i_packsizeid) returning product_id INTO i_prodid;

END IF;
END;

或使你的容器div更大。

答案 2 :(得分：1)

将您的评论放在/* Comments Goes Here */

中

将您的宽度px更改为%，并将box-sizing: border-box;用于浮动的div。

＆＃13;
＆＃13; 
*{
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

问题： 你在两个元素（UIImage *image = self.imgBGBottom.image; CGFloat capWidth = floorf(image.size.width / 2) - 50; CGFloat capTop = 50; //the value is determined by the half circle height,i guess it is 50 height CGFloat capBottom = 0; UIImage *capImage = [image resizableImageWithCapInsets: UIEdgeInsetsMake(capHeight, capTop, capBottom, capWidth)]; [self.imgBGBottom setImage:capImage]; 和.contact_box）中都有边框，并且它们从每一侧获取1px因此它们永远不会合在一起，因为没有足够的空间，我建议你使用属性{{1对于这种情况，它会将元素的边框插入而不是外部，因此您不必担心它们。

.message_box

此外，如果您使用纯css（没有预处理器），请使用此box-sizing:border-box;之类的注释来避免出现问题。

答案 4 :(得分：0)

你的评论方法错了。 在Vanilla CSS中 - 我们使用/* Your comment */ 发表评论。

// - 在LESS，SASS，Stylus类预处理器中得到支持。

如果您在浏览器上运行代码，则可以看到，联系人和消息框的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>

答案 5 :(得分：0)

您为内部 DIV 提供边框，因此它也会添加其实际宽度。因此，如果可能，请为内部 DIV 添加颜色，或者展开父DIV 宽度。 

ArraySize( post ),  //       int     data_size
* {
  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;
}

注意： 你的代码是正确的，但你在CSS中给出错误的评论。这就是它不起作用的原因。请检查CSS部分的评论。在这里，我使用删除评论更新您的代码。它的工作正常。

<强>更新

您还可以将 box-size：border-box 外部DIV和 box-size：content-box 用于内部DIV。您也可以使用此方法解决它。

答案 6 :(得分：0)

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

Dataset ds=checkExistingPDF("filename");
if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)
{
    //record exist with same filename
}
else
{
    //no any record exist with same filename
}

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

答案 7 :(得分：-1)

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

答案 8 :(得分：-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>

如果想要添加边框，请将宽度减小到您正在使用边框的相同px 比如让他们498和298 px res。

答案 9 :(得分：-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>

相关问题
最新问题