所以我想做的是用 HTML 为我自己的小网站创建一个模型。所以直到刚才一切都很顺利。我想要做的是显示一张图片，然后在它旁边显示一个标题和描述，有点像 youtube 所做的。
示例:
因此，如果文本不必下拉到新行，我现在的方式就可以完美地工作。
它的工作示例:
但是，如果其中一个太长，一切都会变得困惑，困惑的例子:
我设置了一个 JS fiddle 来让你们更容易。但是请记住，我正在使用 bootstrap 进行设计，所以 CSS 这么长的原因是因为它包含完整的 bootstrap，但是只有前 57 行是我自定义编写的 css。无论如何，如果有人能帮助我，当我的标题或描述太长时，它会像 youtube 一样放到下一行。
我的 HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
我的 CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS fiddle :http://jsfiddle.net/BjSv8/
谢谢
最佳答案
没有 width:fixed 这样的东西。您需要确保两个内容项的宽度加起来等于父项的宽度。
关于html - 如何修复 HTML 显示错误(我的文本意外下降)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15239088/