Question

我有一个图像位于div的旁边，有一些文字，使用display：inline on the div。当浏览器窗口调整为更窄时，我希望图像缩小而不是首先将文本环绕它。

目前，当调整窗口大小时，文本将在图像下方包裹，然后只有图像按照最大宽度缩放。

最终目标是在水平菜单旁边放置一个水平徽标，并在菜单保持原位时调整窗口上的徽标比例。

如果只使用CSS可以完成这项工作会很棒，但如果不可能，我会使用Javascript。

<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>

<div id="container">
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div id="textblock">Some Random Text</div>
</div>

小提琴：http://jsfiddle.net/uLc8dcsh/1/

Answer 1

试试这个：

<div id="container">
    <div class="div1"> img tag should be here  </div>
    <div id="textblock">   </div>
</div>

和css

img {
    max-width: 100%;
    float:left;

}
.div1{width:80%; float:left;}
#textblock {
    display: inline;
    float:right;
    width:20%;
}
#container{width:100%; float:left; }

Answer 2

你的意思是http://jsfiddle.net/uLc8dcsh/3/吗？

当您最大化窗口时，徽标最大宽度将增加到300像素。
容器的最小宽度设置为300px，因此单词不会换行
徽标的宽度为50％，表示#container宽度

img {
    width:50%;
    max-width: 300px;
}
#textblock {
    display: inline
}

#container {
    min-width: 300px
}

Answer 3

这个答案可能有点过头了：

这是什么：

1。浮动图片，隐藏溢出

如果是这样，文本不会在图像下溢出

2. 为包含div添加了明确修复

这样图像不会破坏外部元素（文章）

<强> HTML

<article class="clearfix">
    <img src="some image"></img>
    <p>Some random text</p> 
</article>

<强> CSS

article p {
    overflow:hidden;
}
article img {
    float:left;
    max-width:80%;
}
article {
    border:1px solid;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

以下是Fiddle

调整浏览器窗口大小时，缩放图像而不是在其周围包装文本

3 个答案: