CSS div溢出問題

我正嘗試使用包含消息和用戶名的CSS創建一個簡單的聊天室。我所做的是我在<div>裏包裹了信息和用戶名。當消息通過<div>時發生問題。它不會推動其他<div> s包含下面的其他消息。CSS div溢出問題

謝謝你幫助我。

這裏jsiddle

enter image description here

CSS

body { background-color: #535954} 
.box22 { content: "";display: block;clear: both;background-color: #FFFFFF;width: 500px;height:400px;position: relative;left: 450px;top: 230px; } 

.user{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;float:right;position: relative;left: -20px;top: 0px;} 
.message{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;float:left;position: relative;left: 10px;top: 40px;} 
.wrapper{position: relative;left: 10px;top: 50px;background-color: #FFFFFF;width: 480px;height: 100px}

HTML

<link rel="stylesheet" href="css/float.css"> 
<div class="box22"> 

<div class="wrapper"> 
<span class="user">johnny123 </span> 
<span class="message">message message overflow message message overflowmessage message overflowmessage message overflowmessage message overflow</span> 
</div> 

<div class="wrapper">d 
<span class="user">glasses glasses </span> 
<span class="message">michael </span> 
</div> 
</div>

來源

2013-06-24 JackRoster

+1對於一個明確框架的問題。 – Nitesh

沒有看太密切的你的代碼，我想你可以通過簡單地在包裝類中使用'float：left'和'clear：left'來完成它。爲了使它的內容稍微向右，可以使用'padding-left：10px'。 – Sumurai8

如果你想顯示整個消息，你爲什麼要把高度：100px在那裏？你不需要在那裏浮動我認爲的元素。我認爲你正在把事情變得容易變成困難。 –

有很多改變，使其工作

body { background-color: #535954} 
    .box22 { content: "";display: block;clear: both;background-color: #FFFFFF;width: 500px;height:400px;position: relative;left: 450px;top: 230px; } 

    .user{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;text-align:right} 
    .message{font-size:18px;font-family:Arial;color: #3A3E42 ;font-weight: bold;} 
    .wrapper{position:relative;background-color: #FFFFFF;width: 480px;}

退房的demo這裏

來源

2013-06-24 07:09:17

謝謝我的朋友對你的精彩幫助 – JackRoster

@JackRoster：歡迎，很高興能有所幫助。 –

我可以肯定嘗試這個CSS：

body { 
    background-color: #535954 
} 
.box22 { 
    content: ""; 
    display: block; 
    clear: both; 
    background-color: #FFFFFF; 
    width: 500px; 
    height: 400px; 
    position: relative; 
    left: 450px; 
    top: 230px; 
} 
.user { 
    font-size: 18px; 
    font-family: Arial; 
    color: #3A3E42; 
    font-weight: bold; 
    float: right; 
    position: relative; 
    left: -20px; 
    top: 0px; 
} 
.message { 
    font-size: 18px; 
    font-family: Arial; 
    color: #3A3E42; 
    font-weight: bold; 
    float: left; 
    position: absolute; 
    left: 10px; 
    top: 32px; 
} 
.wrapper { 
    position: relative; 
    left: 10px; 
    top: 50px; 
    background-color: #FFFFFF; 
    width: 480px; 
    height: 100px 
    margin:5px 0; 
}

HTML源代碼：

<div class="box22"> 
    <div class="wrapper"> <span class="user">johnny123 </span> <span class="message">message message overflow message message overflowmessage message overflowmessage message overflowmessage message overflow</span> </div> 
    <div class="wrapper"> <span class="user">glasses glasses </span> <span class="message">michael </span> </div> 
</div>

來源

2013-06-24 07:10:35 falguni

謝謝你的兄弟也爲你的幫助+1 :) – JackRoster

我認爲這可能適用於你，無論如何減少你的代碼。對於消息和名稱你把一個容器div。只需把float：left;最小高度：「一些需要的高度」;高度：自動;爲您的集裝箱分區。它會簡單地帶領你去擴大高度

來源

2013-06-24 07:17:15 user2587222

你只是設置了很多靜態高度和寬度......我會這樣做下面的代碼...讓我知道如果它適合您的需要，歡呼聲

CSS：

body { 
     background-color: #535954 
    } 

    .box22 { 
     position: relative; 
     display: block; 
     width: 50%; 
     margin: 0 auto; 
     background-color: #FFFFFF; 
     position: relative; 
    } 

    .user { 
     position: relative; 
     font-size: 18px; 
     font-family: Arial; 
     color: #3A3E42; 
     font-weight: bold; 
     text-align: right; 
     padding: 2%; 
    } 

    .message { 
     position: relative; 
     font-size: 18px; 
     font-family: Arial; 
     color: #3A3E42; 
     font-weight: bold; 
    } 

    .wrapper { 
     position: relative; 
     background-color: #FFFFFF; 
    }

HTML：

<div class="box22"> 
    <div class="wrapper"> 
     <div class="user">johnny123 </div> 
     <div class="message">message 
      message overflow message message overflowmessage message 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
     </div> 
    </div> 

    <div class="wrapper"> 
     <div class="user">glasses glasses </div> 
     <div class="message"> 
      michael 
      <br /> 
      overflowmessage message overflowmessage message overflow 
      <br /> 
      overflowmessage message overflowmessage message overflow 
     </div> 
    </div> 
</div>

來源

2013-06-24 07:20:19 chinanzio

我剛試過你的解決方案，你需要指定一個
，否則內容只會在div外溢出，謝謝你的幫助:) – JackRoster

哦，不，我爲了節省文本行數，試着刪除它們並寫出大量的文本，你會看到相同的效果......乾杯 – chinanzio

CSS div溢出問題

回答

相關問題