Создать аналогичный контейнер для сайта - PullRequest
Новая
       8

Создать аналогичный контейнер для сайта

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

Я пытался отобразить нечто подобное на моем веб-сайте :

  • 3 круглых изображения, выровненных рядом друг с другом
  • с центрированным заголовком нижекаждое из изображений («готово», «добавить», «zap»)

  • текст по центру контента под каждым из изображений («Создайте свой собственный ...», «...»)

  • две кнопки по центру по ширине трех изображений

image1

Я почти уверен, что мне нужно использовать display: flex, но, поскольку я абсолютно новичок в flex , я не совсем понимаю, как создать контейнер, как вы можете видеть на изображении сверху..

Это код, который я получил до сих пор (он еще не закончен, но я не знаю, как это сделать) - поэтому любая помощь будет очень признательна.:)

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  display: flex;
  flex-direction: column;
}


#container>div>img {
  max-width:80%;
}
<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
</div>

Ответы [ 6 ]

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

в основном вы должны установить flex-basis для дочерних элементов в процентах и ​​выровнять их по center.здесь я сделал это с именем класса item и установил родительский div с display:flex и justify-content: space-between.

Примечание : вы также можете перейти с space-around вместо space-between согласно вашему удобству.

html 

<div class="container bxp">
 <div class="item item1">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item2">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item3">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
</div>

css 

.bxp{
  max-width: 1000px;
  display:flex;
  margin:auto;
  justify-content:space-between;
}
.item{
  box-sizing:border-box;
  flex-basis: 30%;
  text-align: center;
}
img{
  width:100px;
}
0 голосов
/ 07 июня 2018

Для изучения flexbox вы можете использовать эту бесплатную бесплатную игру: https://flexboxfroggy.com/

.container{
display:flex;
flex-direction:row;/*put the items inside the container in a row*/
justify-content:space-around;/*items are separated with space*/
margin-top:10%;

}
figcaption {
text-align:center;
margin-top:5%;}

img{
width:200px;
border-radius:50%;

}
.column{

}

button{
display:block;/*because input tag are inline by default*/
width:48%;
margin-left:1%;
text-align:center;
background:green;
height:40px;

}
</head>
<body>
<div class="container">

  <div class="column">
    <img alt="" src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>


</div>
<div class="container">
  <button type = "submit">button 1</button>
  <button type="submit">button 2</button>
<div>
</body>
</html>
0 голосов
/ 07 июня 2018

Примерно так: 

#container
{
  display: flex;
  justify-content: space-around;
}

#container .element
{
  text-align:center;
}

Вы также можете заменить «пробел» на «центр» или «пробел» и проверить, подходит ли он вашему дизайну в целом.

Создайте 3 блока (содержащих изображение, заголовок, текст) каждый в отдельном элементе div и добавьте им класс («элемент» выше).

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

Вам не нужно flex для достижения этого результата.Вы должны использовать правильную структуру HTML, а затем применить стили.

Вы должны обернуть каждую пару img и label в div.Я дал ему название класса .sub.Чтобы позиционировать три .sub как три столбца одинаковой ширины, вы можете установить width: 30% для первых двух и margin: auto для последнего.

Установите для свойства отображения .sub значение inline-block и работа выполнена: 

.container {
  width: 100%;
  text-align: center;
}

.sub {
  display: inline-block;
  width: 30%;
  padding: 10px;
}

.sub > img {
  width: 100%;
}

sub:last-child {
  width: auto;
}
<div class="container">
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 1</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 2</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 3</div>
  </div>
</div>
0 голосов
/ 07 июня 2018

Поскольку flex допускает только одно направление, вам придется начать оборачивать свои элементы, чтобы выровнять их по своему желанию. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#container>div>h3 {
  align-self: center;
}

#container>div>img {
  max-width: 100%;
}

.btns {
  display: flex;
}

.btns>button {
  flex: 1;
}
<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
  <div class="btns">
    <button>Text</button>
    <button>Text again</button>
  </div>
</div>

Использование CSS-сетки 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

ul>li>img {
  max-width: 100%;
}

ul>li>h3 {
  text-align: center;
}

.btnsContainer {
  font-size: 0;
  grid-column: 1/4
}

.btnsContainer>button {
  width: 50%;
  font-size: 16px;
}
<ul>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  </li>
  <li class="btnsContainer">
    <button>Text</button>
    <button>Text again</button>
  </li>
</ul>
0 голосов
/ 07 июня 2018

Я бы обернул каждый столбец в div с text-align: center на нем: 

#container {
  display: flex;
  flex-direction: row;
  /* line up divs in a row (ie make the inner divs columns */
  flex-wrap: wrap;
  /* allows the columns to wrap to the next row */
  justify-content: space-between;
  /* adds space in between the columns that fit on the same line */
}

.column {
  flex-basis: 30%;
  /* 30% allows 5% space between each top row column */
  text-align: center;
  /* centre inner content of column */
}

.column img {
  max-width: 100%;
}

.context {
  flex-basis: 100%;
  padding: 1em 0;
  /* 48% allows 4% space between buttons */
  text-align: center;
}

.button {
  flex-basis: 48%;
  /* 48% allows 4% space between buttons */
  text-align: center;
  border: 1px solid black;
}
<div id="container">
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 1</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 2</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 3</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="context">lots of centered text can goe here or just delete this if not needed!</div>
  <div class="button left">button 1</div>
  <div class="button right">button 1</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...