1

The part of this code that's acting up is the text where it says TEXT HERE. If this line of text is long enough, it wraps nicely around <div class="pic">. If it's short, however, it shows up below <div class="pic">.

How can I get it to wrap around the div no matter how long it is?

Here is my code:

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/

4

2 回答 2

1

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

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

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

http://validator.w3.org/

于 2013-07-15T21:29:16.207 回答
0

删除文本前的换行符。

于 2013-07-15T21:42:56.760 回答