Question

请参阅下面的我的HTML结构 - 我想让.prod div位于徽标的右侧，徽标是.row div

我知道这可以使用tables和floats来完成，但我想尝试避免使用它们。

这是我的结构：

＆＃13;

.row {
  width: 100%;
}

.row > div {
  display: inline-block;
}

.row .image {
  height: 100%;
  width: 24%;
}

.row .prod {
  width: 75%;
  height: auto;
}

.prod > div {
  display: inline-block;
  width: Calc(50% - 4px);
}

div {
  border: solid 1px black;
}

＆＃13;

<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="" />
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>
</div>

＆＃13;

Answer 1

将其他信息包含在另一个div中，并为其提供剩余的宽度。

我已经给它74%，因为内联块元素有额外的空间。根据您的要求进行调整。如果您要为现代浏览器实现它，我更希望flexbox。

＆＃13;

.row {
  width: 100%;
}
.row > div {
  display: inline-block;
}
.row .image {
  height: 100%;
  width: 24%;
  vertical-align: top; /* Default to baseline, align to the top */
}
.row .product_info { 
  width: 74%; /* Remaining width */
}
.row .product_info .prod {
  /* width: 75% */ Remove
  height: auto;
}
.prod > div {
  display: inline-block;
  width: Calc(50% - 4px);
}
div {
  border: solid 1px black;
}

＆＃13;

<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="" />
  </div>
  <div class="product_info">
    <div class="prod">
      <div class="prod_image">
        <img alt="Product Image" src="" />
      </div>
      <div class="prod_info">
        Prod Info
      </div>
    </div>

    <div class="prod">
      <div class="prod_image">
        <img alt="Product Image" src="" />
      </div>
      <div class="prod_info">
        Prod Info
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

flexbox可以做到这一点。

＆＃13;

.row {
  display: flex;
}
.image,
.prod {
  flex: 1;
  background: lightblue;
  text-align: center;
  height: 75px;
}
.image {
  flex: 0 0 auto;
  background: orange;
  display: flex;
  flex-direction: column;
}
.image img {
  height: 100%;
  width: auto;
}

＆＃13;

<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="http://lorempixel.com/output/food-q-c-50-50-1.jpg" />
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>
</div>

＆＃13;

Answer 3

Flexbox的？

我自己对flexbox还不熟悉，但您可以使用容器上的align-items: stretch属性来展开您的商品，但最多可以.prod div＆＃39;最大值 - 高度让他们只伸展这么多。您还可以使用Flex项目上的flex属性设置各种宽度属性，以便获得后续宽度。

有关详细信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div格式的CSS样式

3 个答案: