Question

我的图像宽度为320像素。图像向左浮动，文本被包裹。很容易。这是我的HTML：

<div>
    <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" style="width:320px; float:left; margin:0 10px 4px 0;">
    a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg  
</div>

问题：

当窗口大小为321-400-areh像素时，它看起来很奇怪。这些小词有点浮动并且坚持到顶部，但它看起来很糟糕。我想要的是定义文本的最小宽度（仅限右侧），比如说100像素。所以100px宽的包裹在右边，然后在浮动的图像下宽420像素。

因此，如果屏幕为320像素，则图像位于顶部，文字位于下方。

如果屏幕为370像素，则图像位于顶部，文字位于下方。

如果屏幕是420px +，则图像向左浮动，文本环绕，向右和向下。

我希望这很清楚。我一直在尝试浮动和弹性框的各种组合而没有所需的结果。

我不是在寻找复杂的javascript屏幕分辨率尺寸调整解决方案。我可以写出来并根据屏幕大小更改代码...但这不是我想解决这个问题的方式。我只是在寻找一个简单的CSS解决方案。

谢谢

编辑：

这是fiddle。

调整窗口大小，只显示右侧的a和bb。

Answer 1

使用CSS作为媒体样式的屏幕分辨率。

@media screen and (max-width: 420px) {
img {
   float:none !important;
}}

如果屏幕尺寸低于420，则块中的css将适用。

Answer 2

https://jsfiddle.net/manukarki/12syovj0/2/

使用媒体查询。

img{
  width:320px; 
  float:left; 
  margin:0 10px 4px 0;
}
@media only screen and (max-width:370px){
  img{
    float: none;
  }
}

你的问题不明确。你说你只想要图像＆lt; 370px和图像+文字＆gt; 470。他们之间的资源怎么样？

370不会给你想要的结果。 420px是要走的路。

@media only screen and (max-width: 420px){

浮动图像，换行文本，最小换行尺寸

2 个答案: