容器内联块再次

Question

I would like to make a main container that has 2 sub containers - left and right (each 50% of the screen width).我想制作一个有 2 个子容器的主容器 - 左右（每个 50% 的屏幕宽度）。

Left must contain a photo.左侧必须包含照片。 The right one must contain the text (h2 and p directly below).右边的必须包含文本（h2 和 p 正下方）。 The text should be halfway up the image.文本应该在图像的中间。

I need it to describe the products in the store.我需要它来描述商店中的产品。

I was trying this我正在尝试这个

div { border: 1px solid #CCC; }

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

but in this case I could not type h2 and p in the same div.但在这种情况下，我无法在同一个 div 中输入 h2 和 p。

Thanks.谢谢。

Answer 1

If you don't mind using flexbox.如果您不介意使用 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

Grid, in my humble opinion, is the right tool for what you are asking to use it for.以我的拙见，Grid 是您要求使用它的正确工具。 It is a bit newer than flexbox I believe, and it takes a little getting use to, but your whole web-development world is going to change if you take the time to learn it (doesn't take but 8-12 hours of playing with it to grasp the concepts).我相信它比 flexbox 新一点，需要一点时间来适应，但是如果你花时间去学习它，你的整个 web 开发世界将会改变（只需要 8-12 小时的游戏时间）用它来掌握概念）。 Anywho, below is how I would do it. Anywho，下面是我会怎么做。 To learn more about CSS GRID,check out要了解有关 CSS GRID 的更多信息，请查看

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

CHEERS MATE!队友的欢呼声！

<!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>

You asked in your comment how to make it responsive for narrower screens so I did.您在评论中询问如何使其对较窄的屏幕做出响应，所以我做到了。 It will now stack because I added an @media query, which tells it to repond to the screen being 800px or less.它现在会堆叠，因为我添加了一个 @media 查询，它告诉它响应 800px 或更小的屏幕。 Then I changed the grid container.然后我改变了网格容器。 Instead of grid-columns being side by side, which I set using the syntax:而不是并排的网格列，我使用以下语法设置：

 grid-template-columns: 50% 50%;

I changed it to being :我把它改成了：

grid-template-columns: 1fr;

The change switches it from a split container at 50% of the screen size each.此更改将其从拆分容器切换为每个屏幕大小的 50%。 To single containers containing only 1fr(which means just one whole container).到仅包含 1fr 的单个容器（这意味着只有一个完整的容器）。 And since they take up the whole screen width they now stack, and grid automatically wraps the containers for you.由于它们占据了整个屏幕宽度，它们现在堆叠起来，网格会自动为您包裹容器。

容器内联块再次

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-12-25 00:56:41

解决方案2
1 2019-12-25 01:36:00

容器内联块再次

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-12-25 00:56:41

解决方案2 1 2019-12-25 01:36:00

解决方案1
2 已采纳 2019-12-25 00:56:41

解决方案2
1 2019-12-25 01:36:00