Как я могу создать эту (таблицу) с помощью CSS
Я хочу создать этот дизайн с помощью CSS. Красный текст/область (отзывчивая) должны быть адаптивными/гибкими на небольших экранах.
Дизайн, который я хочу создать с помощью CSS:
Я могу сделать это просто с помощью html-таблицы, но таблицы не должны использоваться в дизайне.
Я просмотрел неупорядоченный список, спрятал маркеры и заменил их изображениями, но у меня возникли проблемы со спецификацией между содержимым и адаптивной областью.
Вот некоторый код, но я не могу заставить его работать, когда добавляю текст справа от кнопки facebook и twitter.
<div id = "fact-footer">
<img id = "img-fb" src = "img/fb.svg" alt = "Facebook">
<img id = "img-fb" src = "img/tw.svg" alt = "Facebook">
<a id = "more-facts" href = "#">NÄSTA ></a>
</div>
#fact-footer {
bottom: 0;
font-size: 12px;
}
#img-fb, #img-twitter {
float: left;
width: 35px;
height: 35px;
}
#img-fb {
margin-right: 10px;
}
#more-facts {
float: right;
font-size: 14px;
padding: 8px;
border: none;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
cursor: pointer;
background-color: #26a69a;
color: white;
}
Код выше приводит к этому
Так где твой код?
Я не использую никакой фреймворк
@caramba Я добавил код, который отлично работает без текста рядом с facebook и twitter. Я получаю беспорядок, когда я добавляю текст.
Ага, теперь вижу. Вам нужно будет завернуть. И если текст рядом с фейсбуком отсутствует на изображении, вам нужно будет написать его внутри обертки. (Я надеюсь, что текст не является изображением), тогда с приведенными выше ссылками на квентины вы сможете это сделать. удачи
Ответы 3
использовать начальную загрузку https://getbootstrap.com/
вы можете использовать 1 строку с четырьмя столбцами
<div class = "row">
<div class = "col-sm-3"> facebook image here </div>
<div class = "col-sm-3"> twiter image here </div>
<div class = "col-sm-3"> text </div>
<div class = "col-sm-3"> nasta image here </div>
</div>
Полный Bootstrap не требуется. Загрузите Bootstrap и загляните в файл bootstrap-grid.css. Все работы, о которых вы просите, выполнены. Это чистый css, просто скопировать/вставить, вот и все.
Вы ожидаете, как это:
body{
margin:10px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
span{
color:black;
}
.flex-item:nth-of-type(5) { flex-grow: 1; }
.flex-item {
background: #e0e0e0;
color: white;
padding:6px;
font-weight: bold;
font-size: 1em;
text-align: center;
}
.btn{
background-color: #5fda64; /* Green */
border: none;
color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
cursor: pointer;
}<script src = "https://use.fontawesome.com/ecdc7512a9.js"></script>
<ul class = "flex-container">
<li class = "flex-item">
<i style = "color:blue" class = "fa fa-facebook fa-3x"></i>
</li>
<li class = "flex-item" >
<span > facebook <br/> Account </span>
</li>
<li class = "flex-item"><i style = "color:lightblue" class = "fa fa-twitter fa-3x"></i> </li>
<li class = "flex-item"> <span>Twitter <br/> Account </span> </li>
<li class = "flex-item">(responsive)</li>
<li class = "flex-item">
<button class = "btn">NASTA ></button>
</li>
</ul>Используя flex, вы можете использовать это
<div class = "row">
<div class = "col-sm-3"> facebook image here </div>
<div class = "col-sm-3"> twiter image here </div>
<div class = "col-sm-3"> text </div>
<div class = "col-sm-3"> nasta image here </div>
</div>
.row {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-sm-3 {
width: 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
box-sizing: border-box;
}
Дайте .col-sm-3 границу и посмотрите, что произойдет (и вы используете Bootstap без использования полного пакета).
вы используете фреймворк начальной загрузки? если да, этого можно легко добиться, используя сетки в начальной загрузке.