используя html и css только flexbox - PullRequest
Новая
       1

используя html и css только flexbox

0 голосов
/ 15 февраля 2020

Как выровнять так, потому что текст с индикатором выполнения трудно выровнять, используя flex box.

enter image description here

, если я сделаю 3 отдельных div или 2 див? потому что текст с содержимым индикатора выполнения трудно выровнять

enter image description here

https://jsfiddle.net/ypsmkLrb/1/ МОЙ КОД 

*{
    padding:0;
    margin:0;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.container{
    width:1200px;
    margin:auto;
    background-color:teal;
}
.about-header{
    padding-bottom:25px;
    text-align: center;
}
.about-img img{
    height:200px;
    width:auto;
}
.about-img{
    height:200px;
    width:auto;
}
.about-row{
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;       
}
.about-content{
    line-height:1.6;
    padding-left: 20px;
    border:solid
}
.about-content img{
    height:15px;
    width:auto;
 }
.bar-row-one{
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
}
 .bar-row-two{
    display:flex;
    justify-content:space-around;
}

Ответы [ 3 ]

2 голосов
/ 15 февраля 2020

Если вам нужно просто выровнять индикаторы выполнения, я бы предложил предварительно установить явную ширину для меток, чтобы индикатор выполнения начинался в одной и той же точке для всех из них 

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  width: 1200px;
  margin: auto;
  background-color: teal;
}

.about-header {
  padding-bottom: 25px;
  text-align: center;
}

.about-img img {
  height: 200px;
  width: auto;
}

.about-img {
  height: 200px;
  width: auto;
}

.about-row {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
}

.about-content {
  line-height: 1.6;
  padding-left: 20px;
  border: solid
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}

label {
  width: 50px;
  display: inline-block;
}

.bar {
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mockup Template</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section id="about">
    <div class="container">
      <div class="about-header">
        <h1>About</h1>
      </div>
      <div class="about-row">
        <div class="about-img">
          <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
        </div>
        <div class="about-content">
          <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/> Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
          </p>
          </br>
          <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/> Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/> In vidisse volucptatibus vix. Ectram dissentiunt
            an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/> Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
          </p>
          <div class="bar-row-one">
            <div class="bar bar1">
              <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar2">
              <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
          <div class="bar-row-two">
            <div class="bar bar3">
              <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar4">
              <label class="bar-label-ui">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
        </div>
      </div>
  </section>
</body>

</html>
1 голос
/ 15 февраля 2020

Вот решение:

Демонстрация в реальном времени : https://jsfiddle.net/6qwkmtfx/1/

Или код CSS. 

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* ohhh. a lot of fonts */
}

.container {
  width: 100%; /* orginally "width: 1200px" */
  margin: auto;
  background-color: teal; /* or "white" // "#fff" */
}

.about-header {
  padding-bottom: 25px;
  /* padding-top: 25px; */
  text-align: center;
}

.about-img img {
  height: 200px;
}

.about-img {
  height: 200px;
}

.about-row {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  justify-content: center; /* to grid */
  align-items: flex-start; /* to grid */
}

.about-content {
  line-height: 1.6; /* Missing value? */
  padding-left: 20px;
  border: solid;
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}
1 голос
/ 15 февраля 2020

Что я понимаю из вашего комментария, что вы ищете выравнивание по центру области содержимого. Если это правильно, я думаю, что вы пропустили несколько атрибутов для свойств flex в классе ".about-row", пожалуйста, попробуйте следующий фрагмент: 

*{
              padding:0;
              margin:0;
          }
          body{
              font-family:Verdana, Geneva, Tahoma, sans-serif;
          }
          .container{
              width:1200px;
              margin:auto;
              background-color:teal;
          }
          .about-header{
              padding-bottom:25px;
              text-align: center;
          }
          .about-img img{
              height:200px;
              width:auto;
          }
          .about-img{
              height:200px;
              width:auto;
          }
          .about-row{
              display: flex;
              flex-direction: row;
              font-size: 11px;
              justify-content: center;
              align-items: flex-start;     
          }
          .about-content{
              line-height:1.6;
              padding-left: 20px;
              border:solid
          }
          .about-content img{
              height:15px;
              width:auto;
           }
          .bar-row-one{
              display:flex;
              align-items:flex-start;
              justify-content:space-around;
          }
           .bar-row-two{
              display:flex;
              justify-content:space-around;
          }
 <section id="about">
        <div class="container">
            <div class="about-header">
                <h1>About</h1>
            </div>
            <div class="about-row">
                <div class="about-img">
                    <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
                </div>
                <div class="about-content">
                    <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/>
                        Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
                     </p></br>
                     <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/>
                        Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/>
                        In vidisse volucptatibus vix. Ectram dissentiunt an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/>
                        Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
                     </p>
                    <div class="bar-row-one">
                        <div class="bar1">
                            <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar2">
                            <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                    <div class="bar-row-two">
                        <div class="bar3">
                            <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar4">
                            <label class="bar-label-ui/ux">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...