Question

此代码中表现的部分是文本，其中显示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>
    		&nbsp;
    		<span style="font-size: 20;">
    			&#8226;
    		</span> &nbsp;
  <a target="_blank" href="delete_recipe.php?name=asdf">Delete</a>
  </span>
</body>

http://jsfiddle.net/aPSqW/

Answer 1

这似乎是由于你的文字周围有一些空白字符。我建议进行一些清理和验证。

http://jsfiddle.net/isherwood/aPSqW/1/

<div class="pic"></div>
T

http://validator.w3.org/

Answer 2

删除文本前的换行符。

如何在浮动的div周围包装文本，因为如果文本太短，它不起作用？

2 个答案: