Question

这是我当前的代码：

<!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之间有空隙。这可能吗？

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

Answer 2

您可以通过两种方式轻松对齐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>

Answer 3

您可以使用inline-block

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

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

Answer 4

您可以使用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>

如何在div旁边创建一个div？

4 个答案: