Question

我有以下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，否则让它在图像下面？

Answer 1

您可以使用媒体查询。

img {
   float: left;
}

@media only screen and (max-width: ???px) {
   img {
       float: none;
   }
}

这是fiddle。

<强>更新

如果您想操纵p元素而不是移除float上的img，可以将clear样式添加到p：

@media only screen and (max-width: ???px) {
    p {
        clear: left;
    }
}

以下是fiddle示例。

Answer 2

更新：让图片float:left和文字display:table-cell设置min-width（这将是一个突破点）和{{1}为文本。但是，如果您想要一个固定大小的文本块，只需将其width和min-width设置为相同的值即可。在下面的代码段中，点击“完整页面”，然后调整浏览器窗口的大小以检查结果。

width

* {
    font-weight: 600;
    color: orange;
    font-family: arial;
}

#image {
    width:400px;
    height:150px;
    float:left
}

#textbox {
    display: table-cell;
    width: 400px; 
    min-width: 200px;  
}

Answer 3

这是一个更清洁的解决方案。

html是

<div class="container">
    <div class="container--image pull-left">
        <img src="http://placehold.it/200x150">
    </div>
    <div class="container--content pull-left">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

这是您的css ，如果宽度低于500px，则内容跨度为100％。

.container {
    width:100%;
}

.pull-left {
   float: left;
}

.container--image, .container--content {
   display: block;
}

.container--image {
   margin-right: 20px;
}

.container--content {
   width: 50%;
}

@media only screen and (max-width: 500px) {
    .container--content {
        width: 100%;
    }
}

这是fiddle。

Answer 4

没有必要使用媒体查询。您只需将overflow: hidden添加到<p>元素，所需的阈值宽度为min-width。

img{
  float: left;
}
p{
  overflow: hidden;
  min-width: 50%;
}

<img src="https://placehold.it/200x100/984567/ffffff">
<p>Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>

如果文本无法以一定宽度显示，请使文本低于图像

4 个答案: