HTML / CSS Как выровнять div с 4 текстовыми полями, включая h1, p и pictrues - PullRequest
Новая
       1

HTML / CSS Как выровнять div с 4 текстовыми полями, включая h1, p и pictrues

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

Я новичок в HTML и CSS.В настоящее время я пытаюсь выяснить, как организовать div с четырьмя текстовыми полями, которые включают заголовок, абзац и изображение, расположенное слева.Все это должно выглядеть следующим образом:

enter image description here

Начиная с выбора нижней панели div, поскольку это происходит в нижней части страницы.Придав ему ширину и высоту, которые будут наследоваться следующим элементам div.

Как вы можете видеть, это выглядит далеко не так, как должно быть.Прямо сейчас я не знаю, как подойти дальше от этого шага.Я борюсь с синтаксисом и знаниями о CSS.

Может кто-нибудь помочь мне с этим?Код написан ниже: 

.bottompane {
    width: 100%; /* defines overall width of bottompane */
    height: 300px; /* defines overall height of bottompane */
    background-color: silver;
    position: relative;
}

.row {
    text-align: center;
}

.features-text {
    width: 50%; /* 50% width of the parent directory bottompane */
    height: 120px;
    display: inline-block;
}

.text-upperright {
    width: 50%;
}

.text-upperleft {
    width: 50%;
}

.text-bottomleft {
    width: 50%;
}

.text-bottomright {
    width: 50%;
}

#cat {
    float: right;
}

#world {
    float: left;
}

#swim {
    float: right;
}

#columns {
    float: left;
}

h1 {
}

p {
}
<div class="bottompane">
            <div class="row">
                <div class="features-text">
                    <div class="text-upperleft">
                        <h1>Best-in-class Features</h1>
                        <p>Nobody likes this stuff better than us, you can bet your life on that.</p>
                    </div>
                    <img src="cat.svg" alt="Cat Picture">
                </div>
                <div class="features-text">
                    <div class="text-upperright">
                        <h1>Reliable Service</h1>
                        <p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
                    </div>
                    <img src="world.svg" alt="World Map">
                </div>
            </div>
            <div class="row">
                <div class="features-text">
                    <div class="text-bottomleft">
                        <h1>An Acquired Taste</h1>
                        <p>It may take a little while for you to warm up to us but once you do you will never want to switch.</p>
                    </div>
                    <img src="swim.svg" alt="Person swimming">
                </div>
                <div class="features-text">
                    <div class="text-bottomright">
                        <h1>No Limits</h1>
                        <p>There are absolutely no limits. We do not throttle. We do not cap.</p>
                    </div>
                    <img src="columns.svg" alt="Greek/Roman columns">
                </div>
            </div>
        </div>

Ответы [ 2 ]

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

Если вы не возражаете против сеток, вы можете сделать это таким образом, это намного короче: 

<div class="features-text">
  <div><img src="swim.svg" alt="Person swimming"></div>
  <div>
    <h1>An Acquired Taste</h1>
    <p>It may take a little while...</p>
  </div>
</div>

.bottompane {
    width: 100%; /* defines overall width of bottompane */
    height: 300px; /* defines overall height of bottompane */
    background-color: silver;
    position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
}

.features-text {
    width: 90%;
    height: 120px;
  display: grid;
  grid-template-columns: 20px auto;
}

И соответственно установите отступы и так далее.И, конечно, удалить строку div.

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

Надеюсь, это поможет! 

  <html>
      <style>
        .bottompane {
        width: 100%; /* defines overall width of bottompane */
        height: 300px; /* defines overall height of bottompane */
        background-color: silver;
        position: relative;

    }

    .row {
        text-align: center;
    }

    .features-text {
        width: 50%; /* 50% width of the parent directory bottompane */
        height: 120px;
        display: inline-block;
        position:relative;
        float:left;
    }

    .text-upperright {
        width: 50%;
    }

    .text-upperleft {
        width: 50%;
    }

    .text-bottomleft {
        width: 50%;
    }

    .text-bottomright {
        width: 50%;
    }

    .imageClass{
      float:left;
      width: 50px;
    }
    #cat {
        float: right;
    }

    #world {
        float: left;
    }

    #swim {
        float: right;
    }

    #columns {
        float: left;
    }

    h2 {
    }

    p {
      margin-left:35%;
      text-align:left;
    }
    </style>
    <div class="bottompane">
        <div class="row">
            <div class="features-text">

                <div class="text-upperleft">
                    <img src="cat.svg" alt="Cat Picture" class="imageClass">
                    <h2>Best-in-class Features</h2>
                    <p>Nobody likes this stuff better than us, you can bet your life on that.</p>
                </div>

            </div>
            <div class="features-text">
                <div class="text-upperright">
                    <img src="world.svg" alt="World Map" class="imageClass">
                    <h2>Reliable Service</h2>
                    <p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="features-text">
                <div class="text-bottomleft">
                    <img src="swim.svg" alt="Person swimming" class="imageClass">
                    <h2>An Acquired Taste</h2>
                    <p>It may take a little while for you to warm up to us but once you do you will never want to switch.</p>
                </div>

            </div>
            <div class="features-text">
                <div class="text-bottomright">
                    <img src="columns.svg" alt="Greek/Roman columns" class="imageClass">
                    <h2>No Limits</h2>
                    <p>There are absolutely no limits. We do not throttle. We do not cap.</p>
                </div>

            </div>
        </div>
    </div>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...