优先考虑div宽度

Question

我使用固定width

以下的div

<div width="715">
  <div style="width:40%;float:right">
  </div>
  <div style="width:5%;float:right">
    <img src="x.png" />
  </div>
  <div style="width:15%;float:right">
  </div>
  <div style="width:40%;float:right">
  </div>
</div>

515％= 35

我的问题是x.png大于35（width：80）

您建议如何确定div width的优先顺序？

Answer 1

此弃用标记<div width="715">已弃用，因此尝试了解您希望在此处实现的内容是基于您的代码的代码段：

段

.wrap {
  width: 715px
}
div[class*="div-"] {
  float: right;
  height: 200px;
}
.div-one {
  width: 40%;
  background: red
}
.div-two {
  width: 5%;
  background: green
}
.div-three {
  width: 15%;
  background: blue
}
.div-four {
  width: 40%;
  background: yellow
}
img {
  display: block;
  height: auto;
  max-width: 100%
}

<div class="wrap">
  <div class="div-one"></div>
  <div class="div-two">
    <img src="http://lorempixel.com/100/100" />
  </div>
  <div class="div-three"></div>
  <div class="div-four"></div>
</div>

Answer 2

您是否尝试设置Style=width:30%!Important并尝试设置溢出，如overflow: hidden;
如果这不起作用 你应该将max-width属性设置为固定值，这样它就不会扩展

Answer 3

试试这个：

<div width="715">
<div style="width:40%;float:right">

</div>
<div style="width:5%;float:right">
  <div style="background:url('x.png');background-size: contain;"></div>
</div>
<div style="width:15%;float:right">

</div>
<div style="width:40%;float:right">

</div>
</div>