每当我在 .messages 元素上指定 overflow-y: scroll 时，为什么我的 div 会向右移动？
即使我使用 margin-left: -10px;，它也不会向左移动!
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,900);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
}
body {
background: #BDC1C6;
font-family: 'Roboto';
}
p {
font-weight: 300;
}
.chat {
width: 300px;
background: #fff;
margin: 0 auto;
}
header {
background: #35323C;
height: 50px;
padding: 5px 10px;
}
.menu-icon {
background: #2F2E33;
padding: 5px 10px;
float: left;
font-size: 3em;
line-height: 0.5em;
color: #fff;
border-radius: 3px;
}
.menu-icon:hover {
background: #39caad;
cursor: pointer;
}
h1 {
float: right;
color: #fff;
margin: 5px;
font-weight: 300;
font-size: 1.3em;
}
.menulist {
background: #39caad;
color: #fff;
text-align: center;
padding: 10px;
}
.menulist:hover {
cursor: pointer;
background: rgb(255, 0, 0);
text-align: center;
padding: 20px;
}
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
}
.new {
background: rgb(57, 202, 173);
color: #fff;
text-align: center;
padding: 20px;
}
.new:hover {
cursor: pointer;
background: rgba(57, 202, 173, 0.9);
}
.messages {
padding: 10px;
overflow-y: scroll;
height: 300px;
}
.message {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.message p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.message:hover {
background: #39caad;
cursor: pointer;
}
.messageSender {
text-align: right;
float: right;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageSender p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.messageReceiver {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageReceiver p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
img {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
}
img.sender {
border-radius: 100%;
float: right !important;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
img.receiver {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
p.time {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
p.chattime {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
font-size: 10px;
}
h2 {
font-size: 1em;
font-weight: 400;
}
h2:after {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:before {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:after {
content: '';
height: 0px;
width: 0px;
border-radius: 00%;
margin-right: 5px;
}
footer {
width: 100%;
background: #fff;
padding: 10px;
text-align: center;
font-size: 0.8em;
}
footer p:before,
footer p:after {
content: ' - ';
}<div class="chat">
<header>
<div class="menu-icon" id="menubutton"><span class="entypo-menu"></span>
</div>
<h1>Chats</h1>
</header>
<?php include( "menu.php"); ?>
<div class="openchat" id="openchat">
<img style="width:35px; height: 35px;" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg" />
<h2>XYZ</h2>
<p class="time">Online</p>
</div>
<section class="messages" id="chatBox">
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">12:00:00 AM, 3rd Jan16</p>
<p>There ?</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">12:00:00 AM, 4th Jan16</p>
<p>Yes</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">08:59:33 PM, 4th Jan16</p>
<p></p>
</div>
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:05:55 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:06:02 PM, 4th Jan16</p>
<p>ok</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:06:58 PM, 4th Jan16</p>
<p>hello</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:08 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:31 PM, 4th Jan16</p>
<p>asd</p>
</div>
</section>
<section class="write">
<textarea type="text" name="msg" id="msg" style="width:85%; height: 30px; margin: 0px 0px 0px 2%; resize: none" placeholder="Type your message here..."></textarea>
<button name="send" id="sendMsg" style="width: 9%;"><span class="entypo-plus"></span>Send</button>
</section>
<footer>
<p>Designed by <a href="kashanshah.tk">Kashan Shah</a>
</p>
</footer>
</div>最佳答案
由于 collapsing margins，您会看到此行为.
当您将 overflow-y: scroll 添加到元素时，一个 new block formatting context is established ，这意味着 .openchat 元素的垂直边距不再与 .messages 元素折叠。由于边距不再折叠，元素向右移动。
Margins of elements that establish new block formatting contexts (such as floats and elements with
overflowother thanvisible) do not collapse with their in-flow children.
要解决此问题，您可以将 overflow: hidden 添加到 .openchat 元素中以 overflow hidden 的边距(这实际上会阻止边距相邻):
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
overflow: hidden;
}
或者，您也可以从子 img 元素中删除 margin-bottom:
.openchat img {
margin-bottom: 0;
}
关于html - 为什么每当我添加 "overflow-y: scroll"时我的 div 都会向右移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34595908/