Question

我一直试图让图像浮动到一些段落文本的左边，然后当分辨率低于500px时，图像变得响应并填充顶部（宽度100％）并且文本完全在下面。

它可以在更高的分辨率下工作，但是对于较小的显示，蓝色椭圆中的文字会变得非常小。

我正在使用Bootstrap。

我如何达到我想要的效果？

由于

#arttopcont:before {
  content: ' ';
  display: table;
  min-width: 767px;
}
#artimg{
    float: left;
    width: 300px;
    padding-right: 20px;
}


<div id="arttopcont">
    <div id="artimg">
        <img src="image1.png" />
    </div>

    text here
    text here
    text here
    text here
    text here
    text here
    text here
    text here
    text here   
</div>

Answer 1

如果您正在使用Bootstrap，则可以使用各种大小调整列类在不同屏幕尺寸col-{xs, sm, md, lg}-#处制作更大/更小的部分。

<div class="container">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
             <div id="artimg">
                <img src="image1.png" />
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            text
        </div>
    </div>
</div>

更新（没有Bootstrap类）：

如果我理解正确，您希望图像为全宽，文本在其下方，屏幕尺寸小于500px。您可以使用媒体查询来实现此目的。

@media (max-width: 500px) {
  #artimg {
    width: 100%;
    display: block;
    float: none;
  }
}

希望这有帮助！

漂浮在自举小型显示器上

1 个答案: