html – 如果文本无法以一定宽度显示,则使文本低于图像

2023年12月19日 200次阅读

我有以下
HTML代码

<img src="xxxxx.png" style="float:left"/>
<p>Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>

如果屏幕足够宽,则文本显示在图像的右侧,这很好.

如果屏幕很窄,文本显示在图像下方,这很好.

但是,当屏幕处于过渡阶段(略宽于图像宽度)时,文本会缩小显示在图像的右侧.如何确保文本占据最小宽度,例如30em,否则让它在图像下方？

最佳答案 更新：让图像浮动：左边和文本显示：table-cell然后设置最小宽度(将是断点)和文本的宽度.但是,如果您想要一个具有固定大小的文本块,只需将其最小宽度和宽度设置为相同的值.在下面的代码段中,单击“完整页面”,然后调整浏览器窗口的大小以检查结果.

* {
    font-weight: 600;
    color: orange;
    font-family: arial;
}

#image {
    width:400px;
    height:150px;
    float:left
}

#textbox {
    display: table-cell;
    width: 400px; 
    min-width: 200px;  
}
<img id=image alt=image src="http://i.imgur.com/HNj6tRD.jpg">
<p id=textbox>
    Some texts. Some texts. Some texts. Some texts. Some texts.
    Some texts. Some texts. Some texts. Some texts. Some texts.
</p>
点赞