Очистить inline-блоки без использования пустого div.clear между ними? - PullRequest
Новая
       34

Очистить inline-блоки без использования пустого div.clear между ними?

0 голосов
/ 13 июня 2018

Я понимаю, что более старая техника для такой ситуации должна заключаться в том, чтобы просто поставить пробел между двумя элементами, которые я хочу разделить, но как бы я сделал это более изящным и семантическим способом?

https://codepen.io/sharpdesigner/pen/oywgeo

body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Если я правильно понял проблему, просто попробуйте поместить это объявление CSS в родительский контейнер: 

white-space: pre-line;

При таком подходе вы избегаете преобразования элементов inline-block в элементы block.

pre-line - Это значение приведет к тому, что последовательности пробелов будут свернуты в один символ пробела.Разрывы строк будут происходить везде, где необходимо заполнить строчные блоки, и на новых строках в разметке (или при появлении «\ a» в сгенерированном содержимом).Другими словами, это как обычно, за исключением того, что оно учитывает явные разрывы строк. 

body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
  white-space: pre-line;

}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;

}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>
0 голосов
/ 18 июня 2018

Я не уверен, что правильно понял вопросы, но я предлагаю изучить CSS-сетку, если это применимо.Я немного изменил код вашего пера, чтобы показать, как это будет выглядеть.Вы можете отобразить элементы по вертикали, указав, что вам нужен только один столбец, в моем примере я установил ширину столбца на auto, используя атрибут grid-template-column. 

.block-container {
    text-align: center;
    margin: 30px auto;
    display:grid;

    /*by specifying that there is only one column, this should create vertical alignment.*/ 
    grid-template-column: auto;
 }

.block-1 {
    border: 1px solid #ccc;
    width: auto;
    padding: 20px;
    margin: 0 auto 30px;
    display: inline-block;
 }

.block-2 {
    border: 1px solid #ccc;
    width: auto;
    padding: 20px;
    margin: 0 auto 30px;
    display: inline-block;
 }
0 голосов
/ 13 июня 2018

Вы можете сделать это, используя flex 

.block-container {
  max-width: 1250px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


 
body {
  font-family: arial;
  text-align: center;
}
.block-container {
  max-width: 1250px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.block-1 {
  border: 1px solid #ccc;
  width: 500px;
  padding: 20px;
  display: inline-block;
  margin-bottom: 20px;
}
.block-2 {
  border: 1px solid #ccc;
  width: 200px;
  padding: 20px;
  display: inline-block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title="">a.block-1</a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>

2-й ответ Сделать элемент block2 display: block

 
body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: 200px;
  padding: 20px;
  margin: 0 auto 30px;
  display: block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>
...