容器内联块再次

Question

Look at this

我想制作一个主容器，它有 2 个子容器 - 左侧和右侧（各占屏幕宽度的 50%）。

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

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

我正在尝试这个

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。

谢谢。

Answer 1

如果你不介意使用 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>

Answer 2

以我的拙见，网格是您要求使用它的正确工具。我相信它比 flexbox 更新一点，需要一点时间来适应，但如果你花时间学习它，你的整个网络开发世界将会改变（只需要 8-12 小时的游戏时间）用它来掌握概念）。 Anywho，下面是我会怎么做。要了解有关 CSS GRID 的更多信息，请查看

https://www.w3schools.com/css/css_grid.asp

干杯！

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: #DDD;
            padding: 2px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 50% 50%;
            width: 100%;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #f00;
        }

        .left {
            text-align: center;
            width: auto;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #0f0;
        }

        .right {
            text-align: center;
            font-size: 16px;
            width: auto;
            margin: 0;
            padding: 8px;
            background-color: #777;
            border: 2px solid #00f;
        }

        img {
            max-width: 100%;
            height: auto;
        }

      @media only screen and (max-width: 800px) {
            .grid-container {
                display: grid;
                grid-template-columns: 1fr !important;
                justify-content: center;
                align-items: center;
                padding: 0;
                margin: 0;
            }
        }

    </style>
</head>

<body>
    <div class="grid-container">
        <div class="left">
            <img src="https://html.com/wp-content/uploads/flamingo.jpg">
        </div>
        <div class="right">
        <p>
            Mollis in natoque phasellus nec pellentesque adipiscing ante rhoncus, 
            penatibus molestie inceptos arcu vulputate auctor dolor. Mollis fames malesuada 
            torquent adipiscing consectetur venenatis eu gravida eget, leo phasellus tristique 
            tempus ad facilisi non blandit habitasse, per lectus lobortis primis consequat urna 
            ac pretium. Fames elementum ullamcorper sem nisl vel erat potenti dignissim, nec 
            dictum luctus libero posuere nunc commodo odio facilisi, torquent venenatis
            pellentesque metus ultricies senectus turpis. Consectetur arcu montes non 
            sagittis sociis pulvinar condimentum dictumst, integer duis adipiscing praesent 
            diam hendrerit vel enim suspendisse, per dis rutrum urna maecenas porttitor senectus.
        </p>

        <p>
            Ja, ni gör som ni vill, men jag rår inte för att jag hela livet gått på rosor. Niklas tog tag 
            i datorn och lyfte den mot himmeln. Om vädret inte var så dåligt skulle vi aldrig få något  
            klaga på. Galna kossor lever glatt på åkern i norra Stockholm. Tar upp en liten pall, som 
            tår vid bordet på högra sidan. Han tog tag i den röda skiftnyckeln och slog hårt på muren. 
            Glada bläckfiskar hoppar alltid upp för strömmen när de är på väg hemåt.
        </p>
        </div>
    </div>
</body>

</html>

您在评论中询问了如何让它响应较窄的屏幕，所以我做到了。它现在会堆叠，因为我添加了一个 @media 查询，它告诉它响应 800 像素或更小的屏幕。然后我改变了网格容器。而不是并排的网格列，我使用语法设置：

 grid-template-columns: 50% 50%;

我把它改成：

grid-template-columns: 1fr;

此更改将其从每个屏幕大小为 50% 的拆分容器切换。对于仅包含 1fr 的单个容器（这意味着只有一个完整的容器）。由于它们占据了整个屏幕宽度，它们现在可以堆叠，并且网格会自动为您包裹容器。

容器内联块再次

Container inline-block once again

html

css

inline

css-float