HTML

Question

我正试图在文字旁边显示一行文字进行自动换行。当文本太长时，它会将文本放在图像下面，然后它会进行自动换行。如何将文本换行以使其适合所有宽度的图像旁边？

在我的例子中，我包含了我在图像旁边的意思，以及我的意思是没有包装直到图像下方。我想出的所有尝试都是改变#ItemText的宽度，但这不会产生预期的结果。

＆＃13;

#Items{
    text-align:left;
    display:block;
    vertical-align: top;
    max-width:300px;
    background-color:gray;
}
#imgItem{
    display:inline-block;
}
#ItemText{
    display:inline-block;
    vertical-align: top;
}
.ItemName{
    display:block;
    vertical-align: top;
    font-weight: bold;
}
.ItemNum{
    display:inline-block;
}

＆＃13;

<div id="Items">
    <img id='imgItem' height="100" width="50" src='s.jpg' />
    <div id="ItemText">
        <div class="ItemName">
            This text is short enough
        </div>
        <div class="ItemNum">
            AB503
        </div>
    </div>
</div>
<br/>
<div id="Items">
    <img id='imgItem' height="100" width="50" src='s.jpg' />
    <div id="ItemText">
        <div class="ItemName">
            This text doesn't wrap until it goes under the image
        </div>
        <div class="ItemNum">
            AB503
        </div>
    </div>
</div>

＆＃13;

Answer 1

不向<p>添加任何css，它默认包围float个元素。我们可以通过移除大部分css来实现您想要的效果，只需将图片float向左移动并将<div>更改为<p>。

HTML

<div id="items">
    <div class="item">
        <img class="item-image" height="100" width="50" src='s.jpg' />
        <p class="item-name">This text doesn't wrap until it goes under the image</p>
        <p class="item-num">AB503</p>
    </div>
</div>

#items{
  max-width: 300px;
  text-align: left;
  background-color: gray;
}

CSS

.item {
  min-height: 100px;
  padding: 10px;
}

.item-image {
  float: left;
  padding-right: 10px
}

.item-name {
  font-weight: bold;
}

.item-num {

}

这会将文本很好地包装在.item div中。请注意，由于图片为float，因此您需要在min-height div上设置.item，以防止图片超出.item div的范围。我还添加了一些填充以保持内容远离边缘。

Answer 2

您可以根据图片尺寸应用新的边距，如下所示：https://jsfiddle.net/L6v60u03/

<强> HTML

<div class="Items">
    <img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
    <div class="ItemText">
        <div class="ItemName">This text is short enough</div>
        <div class="ItemNum">AB503</div>
    </div>
</div>
<br/>
<div class="Items">
    <img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
    <div class="ItemText">
        <div class="ItemName">This text doesn't wrap until it goes under the image</div>
        <div class="ItemNum">AB503</div>
    </div>
</div>

<强> CSS

.Items{
    text-align:left;
    display:block;
    vertical-align: top;
    max-width:300px;
    height: 100px;
    background-color:gray;
}
.imgItem{
    display:inline-block;
}
.ItemText{
    display:block;
    vertical-align: top;
}
.ItemName{
    display:block;
    vertical-align: top;
    font-weight: bold;
}
.ItemNum{
    display:inline-block;
}

<强> JS

var width = $(".imgItem").css("width");
var height = $(".imgItem").css("height");
var trueWidth = parseInt(width) + 10; // Adjust padding by adding more
var trueHeight = parseInt(height) * -1 + 10; // Adjust padding by adding more
$(".ItemText").css("margin-left", trueWidth);
$(".ItemText").css("margin-top", trueHeight);

如何让自动换行以较小的宽度换行

2 个答案:

HTML

CSS