Я сделал отзывчивую схему сетки. This is it's pen. Я хотел бы добавить контент к каждому элементу li в макете. Я сделал контент сам по себе, и он выглядит как код ниже. Однако, вставив этот код в li
элементов, испортится макет. Любая идея, как я могу вставить код ниже в li
элементов?Вставка содержимого в ячейки сетки
.wrapper-1 {
padding:10px 10px;
}
.wrapper-3 {
display:inline;
width: 400px;
height: 100px;
padding:10px 10px;
}
.left-side {
float: left;
width: 60px;
height: 100px;
margin-right: 15px;
}
.left-side > .image {
background: url(http://placehold.it/100x100) no-repeat center center;
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom:10px;
}
.right-side {
float: left;
width: 285px;
height: 100px;
}
.right-side > .title {
margin: 0;
}
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p>
</div>
</div>
Ваш размер шрифта и отступы, по-видимому, были самой большой проблемой. Хотя это и не идеально, я думаю, что это шаг в правильном направлении? https://codepen.io/anon/pen/aBbYRg – Chris