Как складывать несколько div по горизонтали
Я хочу сложить несколько div по горизонтали, но не могу понять, как это сделать. Мне также нужна возможность укладывать дочерний элемент вертикально, и я не знаю, как это сделать с помощью Flex. Пример:
.child {border: 1px solid orange}<div class = "parent">
<div class = "child">Content 1</div>
<div class = "child">Content 2</div>
<div class = "child">Content 3</div>
</div>
Мне нужна такая же функциональность, как ROW и COL в Bootstrap, где вы можете определить
<div class = "row">
<div class = "col-md-4">1</div>
<div class = "col-md-4">2</div>
<div class = "col-md-4">3</div>
</div>
если экран меньше точки останова MD, div складывается вертикально.
span подойдет вам.
.parent {display: flex}Переместите их влево или измените отображение на встроенный блок
о, извините, я не писал, я также подумываю о гибкости, но мне также нужно, чтобы некоторые из детей могли складываться вертикально
.child {display:inline-block}извините, но это не сработало
Что случилось с Content3?
Content 3 - это то, что я ищу, чтобы иметь возможность складывать дочерние элементы по горизонтали, но также иметь возможность указать, что дочерние элементы должны располагаться вертикально, как это было бы без Flex.
Ответы 4
Вы можете использовать span вместо div:
<div>
<span>Content 1</span>
<span>Content 2</span>
<span>Content 3</span>
</div>
Или установите для параметра display значение inline или inline-block, как показано ниже:
.child {display: inline-block; border: 1px solid orange}
<div>
<div class = "child">Content 1</div>
<div class = "child">Content 2</div>
<div class = "child">Content 3</div>
</div>
Выше путь. Вам просто может потребоваться указать определенную ширину для элементов, чтобы увидеть, как это подействует. Если в этом есть смысл.
Мой код не отражает измененный макет Content 3.
Если я правильно понимаю вопрос, вы можете использовать float.
<div class = "parent">
<div class = "child">Child 1</div>
<div class = "child">Child 1</div>
<div class = "child">Child 1</div>
</div>
<div class = "parent">
<div class = "child">Child 2</div>
<div class = "child">Child 2</div>
<div class = "child">Child 2</div>
</div>
.parent {
float: left
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
и рабочий пример: https://jsfiddle.net/8opzLqu9/6/
Ой, просто перечитай вопрос. По сути, вы устанавливаете дочерний div как встроенный блок (как прокомментировали люди). Вот так:
<div class = "parent">
<div class = "child">Content 1</div>
<div class = "child">Content 2</div>
<div class = "child">Content 3</div>
</div>
.parent {
width: 500px;
}
.child {
display: inline-block;
width: 150px;
height: 100px;
background: red;
margin: 10px;
}
Надеюсь, это поможет.
.child {
border: 3px solid orange;
display: inline-block;
width: 200px;
height: 40px;
background: #fff;
}
.child:nth-child(2){
margin-left: -5px;
}<div class = "parent">
<div class = "child">Content 1</div>
<div class = "child">Content 2</div>
<div class = "child">Content 3</div>
</div>Используйте обертку Flexbox и установите ширину .child на 50%. Используйте размер коробки: border-box, чтобы включить ширину границы в 50% ширины дочернего элемента.
Теперь вы можете установить для родительского элемента любую желаемую ширину, и дочерние элементы будут следовать за ним.
* {
box-sizing: border-box;
}
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
width: 50%;
border: 1px solid orange;
}<div class = "parent">
<div class = "child">Content 1</div>
<div class = "child">Content 2</div>
<div class = "child">Content 3</div>
</div>да, это сработало, за исключением того, что я не хочу оборачивать его, так как я хочу, чтобы дети меняли размер, но не создавали новые строки. Я уверен, что это возможно. Так же, как Row и Col в Bootstrap.
Вы когда-нибудь слышали о Flex?