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溢出问题

回答

相关问题