Блог

У меня есть контейнерный 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;
}
  

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

Привет, Джейсон,
Я надеюсь, у вас все хорошо.

Вы можете управлять полями divs, для центрирования вы зададите как влево, так и вправо по 30%, а для установки погружения в левую часть экрана вы добавите поле в 30% вправо, так что оно отодвигается от правой части экрана на 30%, вы можете увеличить до 50%, если хотите, чтобы оно было дальше от правой части экрана и ближе к левой.

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

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

Как насчет использования 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>