Как разместить два div рядом друг с другом внутри таблицы td
Ниже мой код html и css. Мне нужно поместить div в ячейку таблицы td. div "infoY" должен отображаться после div "outerY".
<td>
<div class = "outerY"> <div class = "yellow"></div> <div class = "yellow"></div> <div class = "yellow"></div> <div class = "yellow" style = "margin-right: 3px;"></div> </div><div class = "infoY"></div></td>
Ответы 2
Используйте display:flex для поиска td
Редактировать! Я добавляю код css OP из комментария
.infoY{
border: 3px solid #ffc107;
height: 20px;
background: #ffc107;
}
.outerY {
border: 3px solid #ffc107;
width: 74px;
height: 31px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2px;
border-radius: 8px;
position: relative;
}
.yellow {
background-color: #ffc107;
height: 100%;
-webkit-box-flex: 1;
flex: 1;
border-radius: 1px;
margin-left: 4px;
}
td, th {
border: 1px solid #dddddd;
}
.flex{
display:flex
}<table>
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td class = "flex">
<div class = "outerY">outerY
<div class = "yellow"></div>
<div class = "yellow"></div>
<div class = "yellow"></div>
<div class = "yellow" style = "margin-right: 3px;"></div>
</div>
<div class = "infoY">infoY</div>
</td>
<td>Maria Anders</td>
</tr>
</table>Извини ! это не работает. это мой код css. .infoY {граница: 3px solid # ffc107; высота: 20px; фон: # ffc107;}. outerY {margin-top: 10%; border: 3px solid # ffc107; width: 74px; высота: 31 пикс; дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: гибкий; обивка: 2 пикселя; радиус границы: 8 пикселей; позиция: относительная;}. желтый {фон-цвет: # ffc107; высота: 100%; - webkit-box-flex: 1; flex: 1; радиус границы: 1px; margin-left: 4px;}
дисплей: встроенный гибкий; решит вашу проблему
.outer {
display:flex;
flex-wrap:wrap;
}
.infoY {
display:flex;
}
Y{
border: 3px solid #ffc107;
height: 20px;
background: #ffc107;
}
.outerY {
margin-top: 0%;
border: 3px solid #ffc107;
width: 74px;
height: 31px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2px;
border-radius: 8px;
position: relative;
}
.yellow {
background-color: #ffc107;
height: 100%;
-webkit-box-flex: 1;
flex: 1;
border-radius: 1px;
margin-left: 4px;
}
<td>
<div class = "outer">
<div class = "outerY">
<div class = "yellow">1</div>
<div class = "yellow">2</div>
<div class = "yellow">3</div>
<div class = "yellow">4</div>
</div>
<div class = "infoY">11</div>
</div>
</td> https://jsfiddle.net/Sampath_Madhuranga/m8eakoqp/13/
@ Дженнифер, у тебя это работает? Я обновил код с учетом ваших стилей.
inline-flex решил мою проблему. но если я установил для margin-top значение «InfoY» как OuterY, это повлияет на infoY. Как этого добиться?
@Jennifer, это очевидно, так как мой пример добавляет обертку div и помещает в нее все остальные элементы. Когда вам нужно применить верхний край поля, вы должны установить его на обертку div. проверьте мою скрипку ниже, jsfiddle.net/Sampath_Madhuranga/m8eakoqp/18
что ты имеешь в виду?