无法并排安排两个div [英] Not able to arrange two divs side by side
问题描述
我正在构建一个消息服务，为此我有两个div， 请看看我的HTML和CSS，并显示我在哪里出错了？ 您可以使用 / p> 在内部容器和 Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me. I am building a messaging service and for that I have two divs, Please take a look at my HTML and CSS and show where I am going wrong with this?
You can use Add
这篇关于无法并排安排两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ contacts_box （300px）和 message_box （500像素）。它们都包含在 div 中，它是 800px 中的宽度。我要 align 这两个 divs 并排排列在父
* {margin：0; padding：0;}。page_layout {position：fixed;顶部：50px;宽度：100％;身高：100％; border：1px solid green;}。page_container {width：800px;身高：100％;保证金：0汽车;明确：两者; border：1px solid blue;} // Contacts Box及其元素.contacts_box {float：left;高度：100％;宽度：300像素; border：1px dashed magenta;} // Message Box及其元素.message_box {float：right;高度：100％;宽度：500像素; border：1px dashed lemonchiffon;} < html> < HEAD> < link rel =stylesheethref =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>消息框< / div> < div class =message_textBox> < / DIV> < / DIV> < / div>< / body>< / html> box-sizing 来解决问题，而不是计算宽度和边框宽度：
框中添加 box-sizing：border-box 框大小：
* {margin：0;填充：0; box-sizing：border-box;}。page_layout {position：fixed;顶部：50px;宽度：100％;身高：100％; border：1px solid green;}。page_container {width：800px;身高：100％;保证金：0汽车;明确：两者;边框：1px纯蓝色; box-sizing：content-box;} .contacts_box {float：left;身高：100％;宽度：300px; border：1px dashed magenta;} .message_box {float：right;身高：100％;宽度：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>消息框< / div> < div class =message_textBox> < / DIV> < / DIV> < / DIV> < / body> contacts_box (300px) and message_box(500px). They are both wrapped inside a parent div which is 800px in width. I want align these two divs side by side inside the parent div. But no matter what I do, I just can't get them to align! * {
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>box-sizing to solve the issue rather than calculating the width and border widths:box-sizing: border-box to the inner containers and box-sizing: content-box to the outer container and there you go!* {
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>
