html - 优先考虑div宽度

标签 html css

我使用固定 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>

715 的 5% = 35

我的问题是 x.png 大于 35 (width: 80)

您推荐什么方法来确定 div width 的优先级?

最佳答案

此标记 <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>

关于html - 优先考虑div宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33892914/

相关文章:

html - 如何在带阴影的表格上制作三 Angular 形?

javascript - 按键时增加变量的值

fonts - 是否可以仅更改文本阴影的颜色?

css - 向右浮动不会在向左浮动元素的情况下一直向上 float

javascript - margin 移动 : <ul> jitters when hover function initiated.

html - 造型 Angular Material Paginator

jquery - 100% 高度 div 的视差

jquery - 右对齐工具提示

html/css : use image-set to have a portrait or landscape image as background-image for a div

css - 使用 Flexbox 的完整内容高度和对齐卡片