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

Как насчет использования flex?Я не знаю, понимаю ли я твой смысл.Но flex - это хороший инструмент для верстки.Вот хорошее руководство для flex: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

#container {
    margin: auto;
    display:flex;
    flex-direction:column;
}
#child1{
  padding-right:3em;
}
#child2 {
  padding-top:3em;
  align-self: center;
}

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

Answer 2

#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%, если хотите, чтобы он был дальше от правой стороны экрана и ближе к левому краю.

введите описание изображения здесь

введите описание изображения здесь