html - CSS，想要将元素对齐到居中的 div 的左侧，并在其周围留出一些间距？

Question

我有一个容器 div，有两个子 div:

<div id="container">

    <div id="child1">
    I want this to be displayed next to the child2 div, 
    but offset to the right by about 3em. Basically, 
    I want spacing between it and the second child, 
    but I want the second child to remain centered.
    </div>

    <div id="child2">
    I want this to be centered on the page
    </div>

</div>

我正在尝试弄清楚如何使第二个子元素沿页面水平居中，同时在它与第一个子元素 div 之间添加一些间距。有谁知道如何做到这一点？我正在使用以下 css，但无法让第二个 div 在它和第一个 div 之间填充。

我有以下 css，但不能让它正常工作:

#container {
    margin: auto;
    text-align: center;
}
#child1, #child2 {
    display: inline-flex;
    float: left;
}

Answer 1

#container {
    margin: auto;
    text-align: center;    
}

#container #child1{
  border: 5px solid red;  
  margin-right:30%;
/*margin-right:50%;*/
}


#container #child2{
  border: 5px solid green;  
  margin-left:30%;
  margin-right:30%;
}

<div id="container">

    <div id="child1">
    <p>I want this to be displayed next to the child2 div, 
    but offset to the right by about 3em. Basically, 
    I want spacing between it and the second child, 
    but I want the second child to remain centered.</p>
    </div>
<br>
<br>
    <div id="child2">
      <p>I want this to be centered on the page</p>
    </div>

</div>

嘿杰森， 我希望你过得很好。

您可以控制 div 的边距，要居中，您需要将左侧和右侧都设置为 30%，要将潜水设置到屏幕左侧，您需要向右侧添加 30% 的边距，所以它从屏幕右侧推开 30%，如果您希望它远离屏幕右侧并靠近屏幕左侧，您可以增加到 50%。

enter image description here

enter image description here