我想制作一个有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。
谢谢。
如果您不介意使用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>, 在我看来，
网格是您要使用它的正确工具。我认为它比flexbox更新，并且需要一点时间来使用，但是如果您花时间学习它，那么整个Web开发的世界将会改变（不需要花8到12个小时的时间掌握概念）。任何人，下面是我要怎么做。要了解有关CSS GRID的更多信息，请查看
干杯！
<!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查询，该查询告诉它响应于800px或更小的屏幕。然后，我更改了网格容器。我不是使用并排的网格列，而是使用以下语法设置的：
grid-template-columns: 50% 50%;
我将其更改为：
grid-template-columns: 1fr;
该更改将其从拆分的容器切换为每个屏幕大小的50％。到仅包含1fr的单个容器（意味着仅一个完整的容器）。由于它们占据了整个屏幕的宽度，因此现在可以堆叠，并且网格会自动为您包装容器。