这段代码中起作用的部分是文本，其中显示 TEXT HERE。如果这行文本足够长，它会很好地环绕 <div class="pic">。 .但是，如果它很短，它会显示在下方 <div class="pic"> .
无论它有多长，我怎样才能让它环绕在 div 周围？
这是我的代码:
body {
margin: 30px 0px 30px 0px;
text-align: center;
}
.main {
text-align: center;
background-color: #ffffff;
opacity: 0.92;
border-radius: 12px;
padding: 30px 55px 30px 55px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
display: inline-block;
max-width: 600;
}
div,
fieldset {
overflow: auto;
}
div {
margin-bottom: 30px;
}
fieldset {
border: 1px solid #5C5C5C;
border-radius: 5px;
background-color: #DEF4FF;
text-align: left;
padding: 10 15 15 15;
margin-top: 15px;
}
.pic {
float: left;
width: 150px;
height: 150px;
border: 1px solid #555555;
margin: 0px 15px 15px 0px;
}<body>
<span class="main">
<h2>asdf</h2>
<div style="text-align: left; margin: 0px;">
<div class="pic" style="background: url(http://blabla.jpg) 50% 50% no-repeat; background-size: auto 100%;">
</div>
<br />
TEXT HERE
</div>
<fieldset>
<legend>Ingredients</legend>
<ul>
<li><a href="display_ingredient.php?name=Allspice" target="_blank">allspice</a></li>
</ul>
</fieldset>
<br />
<a target="_blank" href="edit_recipe.php?name=asdf">Edit</a>
<span style="font-size: 20;">
•
</span>
<a target="_blank" href="delete_recipe.php?name=asdf">Delete</a>
</span>
</body>最佳答案
这似乎是由于您的文本周围出现了一些空白字符。我建议进行一些清理和验证。
http://jsfiddle.net/isherwood/aPSqW/1/
<div class="pic"></div>
T
关于html - 如果文本太短，如何将文本环绕在 float 的 div 周围，因为它不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17664126/