容器内联块再次 [英] Container inline-block once again

问题描述

看看这个

我想制作一个有2个子容器的主容器-左右（每个为屏幕宽度的50％）。

I would like to make a main container that has 2 sub containers - left and right (each 50% of the screen width).

左侧必须包含一张照片。右边的必须包含文本（h2和p正下方）。文字应该在图片的一半。

Left must contain a photo. The right one must contain the text (h2 and p directly below). The text should be halfway up the image.

我需要它来描述商店中的产品。

I need it to describe the products in the store.

我正在尝试

div { border: 1px solid #CCC; }

<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>

但在这种情况下，我无法在同一div中键入h2和p。

but in this case I could not type h2 and p in the same div.

谢谢。

推荐答案

如果您不介意使用flexbox。

If you don't mind using flexbox.

.container {
  border: 10px solid red;
  display: flex;
  box-sizing: border-box;
}

.container > div {
  flex-basis: 50%;
  border: 10px solid blue;
  margin: 10px;
  padding: 10px;
}

.left img {
  width: 100%;
  height: 100%;
}

.right__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.right__content * {
  margin: 0;
}

 

<div class="container">
  <div class="left">
      <img src="https://placehold.it/300x150" alt="left img">
  </div>
  <div class="right">
     <div class="right__content">
       <h1>Header text</h1>
       <p>my desc</p>
     </div>
  </div>
</div>

这篇关于容器内联块再次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！