Question

我在同一个div中遇到两个img有问题。我需要让它们保持在一条线上，并在右侧触摸她时调整左侧的图像。

<div class="wrapper">
    <header class="container relative">
        <a class="left logo"><img src="#" width="248" height="52" alt="" /></a>
        <a class="right" href="#"><img src="" /><img src="#" width="32" height="32" alt="" /></a>
        <div class="clear"></div>
    </header>
</div>

.wrapper {
    margin: 0 auto;
    width: 100%;
}
img {
    max-width: 100%;
}
.container {
    margin: 0 auto;
    min-width: 220px;
    max-width: 1024px;
}
.relative {
    position: relative;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

调整导航器的大小以查看此内容。

我想要实现的是减少图像，平滑地减小宽度，足以达到最小宽度。自动

Answer 1

使用css3媒体查询https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

所以只需添加：

@media (max-width: 300px) {
  .left {
    width: 80%;
  }

}

Answer 2

为了灵活扩展您的布局，Flexbox是一个合理的解决方案。

请参阅：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

兼容性列表位于：http://caniuse.com/flexbox

使灵活的盒子使用几行代码，例如：

.flex {
    display: flex;
}

将此课程添加到您的论坛。在报告的材料中可以找到很多设置。

为获得最大兼容性，请使用供应商前缀。

Answer 3

尝试将流体宽度设置为图像的容器：

a.left {
  width: 85%;
}

http://jsfiddle.net/SZd3r/3/

img调整大小自动保持线

3 个答案: