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

试试这个：

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 3

试试这个

.left {


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

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

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

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

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

5 个答案: