Html 3个div-使中间的一个响应

我在创建响应标题时遇到了一些问题，我在包装中放置了3个div（左div-logo、中div-image、右div-logout image）

现在，我想当用户从平板电脑（小分辨率）访问我的页面时，中间div中的图像将响应迅速，并变得更小

但问题是，当我将页面缩小到小分辨率（通过缩小浏览器或从平板电脑访问页面）时，右边的div将在下面，如果我缩小得更多，第二个div也会在下面

这是我的密码：

<div class="wrapper"> 
<div class="left">
    <a href="#">
        <img src="img/logo.png" />
    </a>
</div>
<div class="middle">
    <a href="#">
        <img src="img/middle.png" />
    </a>
</div>
<div class="right">
    <a href="#">
        <img src="img/logout.png" />
    </a>
</div>

• 我希望中间的图像会有响应，这样当我缩小页面大小时，它的图像会越来越小，并且页眉中的任何内容都不会被破坏

试试这个：

CSS:

HTML:

演示：/，带文本

带图片的演示

注意：更改html布局。将浮动div放在一起。请参阅html，然后重试此操作

.left {


 float:left;
    width:20%
}
.middle{
   float:left;
    width:60%;
 }
  .right{
      float:right;
    width:20%;
 }

试试这个：

.左{
浮动：左；
宽度：20%；
}
.包装纸{
浮动：左；
溢出：隐藏；
宽度：100%；
}
.中{
浮动：左；
宽度：60%；
}
img{
最大宽度：100%；最大高度：100%；
}
.对{
浮动：右侧；宽度：20%；
}

您需要设置左右侧边栏的宽度

.wrapper{
溢出：自动；
边框：1px实心#ccc；
}
.左{
浮动：左；
宽度：100px；
}
.中{
填充：0 120px 0 100px；/*填充边栏宽度*/
文本对齐：居中；
}
.中img{
最大宽度：100%；
}
.对{
浮动：对；
宽度：120px；
}

---

鉴于您描述的布局，我倾向于完全放弃浮动：，而使用位置：相对和

位置：绝对和
边距
：


.wrapper{
位置：相对位置；
高度：122px；
边框：1px实心rgba（255,0,0,1）；
}
.中{
位置：相对位置；
利润率：10像素224像素；
高度：100px；
边框：1px实心rgba（0255,0,1）；
}
.左{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：200px；
高度：100px；
边框：1px实心rgba（0,0255,1）；
}
.对{
位置：绝对位置；
顶部：10px；
右：10px；
宽度：200px；
高度：100px；
边框：1px实心rgba（0,0255,1）；
}

edit：这是因为中间的div的宽度为100%，因此没有空间让正确的div浮动在同一行上。我希望生活在一个删除愚蠢的float属性的web环境中。这对你学习定位和显示属性没有帮助！看起来不错！谢谢但是如果在中间的div中有图像，它会工作吗？我需要中间的div包含图像，这将是响应？是的，它会。您需要将“最大宽度：100%”添加到img css中，这样它就不会溢出。此外，您还必须根据布局调整图像对齐方式。这应该很容易，请给你的答案添加一些解释。给主分区100%的宽度，例如包装{width:100%}，然后像我在回答中提到的那样将其分成三部分。当你在平板电脑、手机或pc上看到它时，它会自动调整宽度
.left {
    float:left;
}
.middle {
    display:table-cell;
}
.right {
    float:right;
}
img{
    max-width:100%;
}

<div class="wrapper">
    <div class="left"> <a href="#">
        <img src="http://lorempixel.com/200/200/sports/1/" />
    </a>

    </div>
    <div class="right"> <a href="#">
        <img src="http://lorempixel.com/200/200/sports/3/" />
    </a>

    </div>
    <div class="middle"> <a href="#">Dummy text</a>        </div>
</div>

.left {


 float:left;
    width:20%
}
.middle{
   float:left;
    width:60%;
 }
  .right{
      float:right;
    width:20%;
 }

<div class="wrapper"> 
<div class="left">
    <a href="#">
        <img src="http://www.92pixels.com/wp-content/uploads/2011/02/ldi6.jpg" />
    </a>
</div>
<div class="middle">
    <a href="#">
        <img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" />
    </a>
</div>
<div class="right">
    <a href="#">
        <img src="http://www.92pixels.com/wp-content/uploads/2011/02/ldi6.jpg" />
    </a>
</div>

.left {
    float: left;
    width: 20%;
}

.wrapper {
    float: left;

    overflow: hidden;
    width: 100%;
}
.middle{
   float:left;
    width:60%;
 }
img {
    max-width: 100%;max-height: 100%;
}
  .right{
      float:right;   width: 20%;
 }