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

Question

我在创建响应式标题时遇到了一些问题，我在包装器中放置了 3 个 div（左 div - 徽标，中间 div - 图像，右 div - 注销图像）。

现在我希望当用户从平板电脑（小分辨率）访问我的页面时，中间 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>

.left {
   float:left;
}
.middle{
   float:left;
    width:100%;
 }
  .right{
      float:right;
 }

• 我希望中间图像具有响应性，因此当我缩小页面大小时它会越来越小，并且标题中的任何内容都不会被破坏

Answer 1

鉴于您描述的布局，我倾向于完全放弃 float: 并使用 position:relative; 和 position:absolute; 和 margin 代替：

.wrapper {
position: relative;
height: 122px;
border:1px solid rgba(255,0,0,1);
}

.middle {
position: relative;
margin:10px 224px;
height: 100px;
border:1px solid rgba(0,255,0,1);
}

.left {
position: absolute;
top: 10px;
left: 10px;
width:200px;
height: 100px;
border:1px solid rgba(0,0,255,1);
}

.right {
position: absolute;
top: 10px;
right: 10px;
width:200px;
height: 100px;
border:1px solid rgba(0,0,255,1);
}

<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>

Answer 2

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

.wrapper {
    overflow:auto;
    border:1px solid #ccc;
}
.left {
    float:left;
    width:100px;
}
.middle {
    padding:0 120px 0 100px; /* padding as the sidebar widths */
    text-align:center;
}
.middle img {
    max-width:100%;
}
.right {
    float:right;
    width:120px;
}

<div class="wrapper">
    <div class="left">
        <a href="#"><img src="http://placehold.it/100x100&text=left" /></a>
    </div>
    
    <div class="right">
        <a href="#"><img src="http://placehold.it/120x200&text=right" /></a>
    </div>
    
    <div class="middle">
        <a href="#"><img src="http://placehold.it/450x350&text=center" /></a>
    </div>
</div>

演示地址：http://jsfiddle.net/xcdd8uwq/

Answer 3

试试这个：

CSS：

.left {
    float:left;
}
.middle {
    display:table-cell;
}
.right {
    float:right;
}
img{
    max-width:100%;
}

HTML：

<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>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/525/ // 带文字

演示：http://jsfiddle.net/lotusgodkk/GCu2D/526/ // 带图片

注意：更改 html 布局。将浮动 div 放在一起。见html

Answer 4

试试这个：http://jsfiddle.net/76kMN/22/

<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%;
 }

Answer 5

试试这个

.left {


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