Html 强制文本换行时出现问题
我试图把几个消息放在一个类似线程的布局中。要查看我所拥有的结果,请点击此处: 如果调整屏幕宽度,您将看到下方消息中的文本布局不正确。除此之外,我似乎不能让日期总是出现在屏幕的最右边 以下是指向完整JSFIDLE的链接: 以下是一些我希望发生的事情的图片: 有什么帮助吗?这怎么样 HTML:Html 强制文本换行时出现问题,html,css,layout,word-wrap,Html,Css,Layout,Word Wrap,我试图把几个消息放在一个类似线程的布局中。要查看我所拥有的结果,请点击此处: 如果调整屏幕宽度,您将看到下方消息中的文本布局不正确。除此之外,我似乎不能让日期总是出现在屏幕的最右边 以下是指向完整JSFIDLE的链接: 以下是一些我希望发生的事情的图片: 有什么帮助吗?这怎么样 HTML: <div class="container"> <div class="name">John Smith</div> <div class="dat
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
.name {
float:left;
}
.date {
float:right;
}
.content {
clear:both;
}
.container {
overflow:auto;
padding-left:115px;
background: url(http://www.sunjay.ca/images/logo_notext.gif) no-repeat;
min-height: 110px;
margin-bottom: 20px;
}
我摆弄着你的小提琴,做了这样一件事: HTML:
这就是你想要的吗?我不认为使用背景图片真的是一种选择。假设此线程与任何其他论坛中的线程相同,则每个帖子的图片都会发生变化。因此有必要使用图像标签。谢谢您的帮助,但amosrivera是正确的。我需要能够使用几个不同的图像。作为一个例子,JSFIDLE中的图像是相同的。谢谢你的帮助!非常感谢你!这太棒了!
<div class="messages">
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>John Smith</h3>
</div>
<div class="message-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>Joe Smith</h3>
</div>
<div class="message-text">
<p>Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</p>
</div>
</div>
</div>
</div>
body
{
margin: 20px;
}
.message
{
padding: 2px;
margin: 2px;
clear: both;
width:100%;
}
.message .message-image
{
padding: 5px;
float:left;
}
.message .message-body
{
}
.message .message-body .message-name
{
}
.message .message-body .message-name h3
{
}
.message .message-body .message-text
{
}
.message .message-body .message-date
{
float: right;
}