如何在 div 旁边制作 div？ [复制]答案

【问题标题】：How can I make a div next to a div? [duplicate]如何在 div 旁边制作 div？ [复制]
【发布时间】：2021-01-19 12:19:25
【问题描述】：

这是我当前的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>StoryReader</title>
        <link rel="stylesheet" type="text/css" href="indexStyle.css">
    </head>
    <body>
        <center><h1 id="errorbox" style="background-color: red; border-radius: 20px; font: message-box; font-size: 20px;"></h1></center>
        <center><h1 style="font: message-box; font-size: 25px;">Welcome to StoryReader.</h1></center>
        <center><button onclick="ReturnToHomepage()" style="background-color: chartreuse; border-radius: 5px; font: message-box;">Return to the homepage.</button></center>
        <hr>
        <p>

        </p>
            <div class="inline-block" id="Readers1">
                <center><h3 style="font: status-bar; font-size: 20px;">Lion, Witch and the Wardrobe.</h3></center>
                <hr>
                <h4 style="font: message-box; font-size: 15px;">Description:</h4>
                <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step through a wardrobe door in the strange country house where they are staying, they find themselves in the land of Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the terrible White Witch.</p>
                <center><input type="button" value="Open" onclick="OnClickLion()"></center>
            </div>
            <p>
    
            </p>
            <div class="inline-block" id="Readers2">
                <center><h3>Unknown...</h3></center>
                <hr>
                <h4>Description:</h4>
                <p>Coming soon!</p>
            </div>
    </body>
    <script src="script.js"></script>
</html>

我想让它使 Readers2 位于 Readers1 旁边，因此左侧是 Readers 1，右侧是 Readers2。我还想要每个 div 之间的间隙。这可能吗？

【问题讨论】：

你有css吗？
是的，有可能，例如看一下 CSS flex，但是在发帖之前，请自己搜索一下，这样的问题有几十个（如果不是数百个）。

标签： html

【解决方案1】：

我建议不要使用内联 css，而是使用样式标签并在那里写你的 css，然后使用那个 css。通过这种方式，您可以重复使用您定义的样式。

使用 flex 可以轻松实现你想要的，了解更多flexbox

.readers {
 display: flex;
}

.inline-block {
 margin-right: 8px;
}

h3 {
 font: status-bar; 
 font-size: 20px;"
}

<!DOCTYPE html>
<html>
    <head>
        <title>StoryReader</title>
        <link rel="stylesheet" type="text/css" href="indexStyle.css">
    </head>
    <body>
        <center><h1 id="errorbox" style="background-color: red; border-radius: 20px; font: message-box; font-size: 20px;"></h1></center>
        <center><h1 style="font: message-box; font-size: 25px;">Welcome to StoryReader.</h1></center>
        <center><button onclick="ReturnToHomepage()" style="background-color: chartreuse; border-radius: 5px; font: message-box;">Return to the homepage.</button></center>
        <hr>
        <p>

        </p>
        <div class="readers">
            <div class="inline-block" id="Readers1">
                <center><h3>Lion, Witch and the Wardrobe.</h3></center>
                <hr>
                <h4 style="font: message-box; font-size: 15px;">Description:</h4>
                <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step through a wardrobe door in the strange country house where they are staying, they find themselves in the land of Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the terrible White Witch.</p>
                <center><input type="button" value="Open" onclick="OnClickLion()"></center>
            </div>
            <p>
    
            </p>
            <div class="inline-block" id="Readers2">
                <center><h3>Unknown...</h3></center>
                <hr>
                <h4>Description:</h4>
                <p>Coming soon!</p>
            </div>
        </div>
    </body>
    <script src="script.js"></script>
</html>

【讨论】：

【解决方案2】：

您可以使用 display: flex 将 div 保持在同一行。给出宽度并使用属性 justify-content 来设置间隙。


<div style="display: flex; justify-content: space-between;">
  <div class="inline-block" id="Readers1" style="width: 49%">
    <center>
      <h3 style="font: status-bar; font-size: 20px;">Lion, Witch and the Wardrobe.</h3>
    </center>
    <hr>
    <h4 style="font: message-box; font-size: 15px;">Description:</h4>
    <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step
      through a wardrobe door in the strange country house where they are staying, they find themselves in the land of
      Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the
      terrible White Witch.</p>
    <center><input type="button" value="Open" onclick="OnClickLion()"></center>
  </div>
  <p>

  </p>
  <div class="inline-block" id="Readers2" style="width: 49%">
    <center>
      <h3>Unknown...</h3>
    </center>
    <hr>
    <h4>Description:</h4>
    <p>Coming soon!</p>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以通过两种方式轻松对齐divs - 使用 flex 或 grid。每个都有自己的优点和缺点。

在此处了解有关 flexbox 的更多信息：Flexbox

在此处了解有关网格的更多信息：Grid

.flex {
  display: flex;
  gap: 10px;
}

.flex > div {
  flex: 1;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

div > div {
  background-color: gold;
}

<div class="flex">
  <div>
    <p>Readers 1</p>
  </div>
  <div>
    <p>Readers 2</p>
  </div>
</div>

<hr />
  
<div class="grid">
  <div>
    <p>Readers 1</p>
  </div>
  <div>
    <p>Readers 2</p>
  </div>
</div>

【讨论】：

【解决方案4】：

您可以使用inline-block

#Readers1, #Readers2 {
    display: inline-block;
    width: 50%;
}

这样做的好处是它具有通用浏览器支持。

【讨论】：