CSS заголовок с lo go слева и несколькими абзацами справа - PullRequest
Новая
       3

CSS заголовок с lo go слева и несколькими абзацами справа

0 голосов
/ 03 августа 2020

Когда размер моего экрана составляет 768 пикселей и выше, я пытаюсь выровнять lo go слева и несколько абзацев справа. См. Следующий pi c. Но я попытался использовать встроенный блок float и display, но весь top class будет выровнен полностью влево. Он не может быть централизованным, пожалуйста, помогите всем гуру, поскольку я новичок в CSS. Спасибо.

ЧТО Я ПЫТАЮСЬ ДОСТИГАТЬ

Trying to achieve

WHAT I AM FACING

image 

body {
    margin:0;
    padding:0;
    font-family: Open Sans;
}

.img-logo{
    width:300px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.img-banner{
    width:300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.top{
    width: 300px;
    margin: 0 auto;
}

.top p {
    text-align: center;
}

.top p b {
    color: #053D66;
}


.header{
    width: 300px;
    margin: 0 auto;
}

.wrapper{
    width: 300px;
    margin: 0 auto;
}

ol.s {
    list-style-type: upper-greek;
}

.img-footer{
    width:100%;
    margin: 0 auto;
}

/* ----------- responsivity ----------- */

@media only screen and (min-width: 768px) {

    .top{
        width: 600px;
        margin: 0 auto;
        display: inline-block; 
    }

    .toright {
        float: right;
      }
      .toleft {
        float: left;
      }

    .img-banner{
        width:600px;
    }

    .header{
        width: 600px;
    }
    
    .wrapper{
        width: 600px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
    <title>Updates</title>

</head>
<body>
    <div class="top">
        <div class="toleft">
            <img class="img-logo" src="http://www.talent-trust.com/documents/img/talent-trust.png" alt="">
        </div>
        <div class="toright">
            <p style="margin:0px"><b style="color:#053D66;">E</b>&nbsp;<a href="mailto:info@talent-trust.com">info@talent-trust.com</a></p>
            <p style="margin:0px"><b style="color:#053D66;">T</b>&nbsp;0757 278 8418</p>
            <p style="margin:0px"><b style="color:#053D66;">W</b>&nbsp;<a href="http://www.talent-trust.com">www.talent-trust.com</a></p>
        </div>
    </div>
    
    <div class="header">
        <p><h2>COVID19 Medical Update for Missionaries, July 2020</h2></p>
        <p>Significant issues remain even if you have insurance</p>
    </div>
 </body>
 </html>

**

Ответы [ 3 ]

1 голос
/ 03 августа 2020

Я удалил display: inline-block (так как он не работает с margin: 0 auto). Я также выровнял ваши элементы с помощью flexbox. Здесь - дополнительная информация о flexblox. 

body {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
}

.img-logo {
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-banner {
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.top {
  width: 300px;
  margin: 0 auto;
}

.top p {
  text-align: center;
}

.top p b {
  color: #053D66;
}

.header {
  width: 300px;
  margin: 0 auto;
}

.wrapper {
  width: 300px;
  margin: 0 auto;
}

ol.s {
  list-style-type: upper-greek;
}

.img-footer {
  width: 100%;
  margin: 0 auto;
}


/* ----------- responsivity ----------- */

@media only screen and (min-width: 768px) {
  .top {
    width: 600px;
    margin: 0 auto;
    /* display: inline-block; */
    
    /* Using flexbox instead: */
    display: flex;
    justify-content: space-between;
  }
  /*
  .toright {
    float: right;
  }
  .toleft {
    float: left;
  }
  */
  .img-banner {
    width: 600px;
  }
  .header {
    width: 600px;
  }
  .wrapper {
    width: 600px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
  <title>Updates</title>

</head>

<body>
  <div class="top">
    <div class="toleft">
      <img class="img-logo" src="http://www.talent-trust.com/documents/img/talent-trust.png" alt="">
    </div>
    <div class="toright">
      <p style="margin:0px"><b style="color:#053D66;">E</b>&nbsp;<a href="mailto:info@talent-trust.com">info@talent-trust.com</a></p>
      <p style="margin:0px"><b style="color:#053D66;">T</b>&nbsp;0757 278 8418</p>
      <p style="margin:0px"><b style="color:#053D66;">W</b>&nbsp;<a href="http://www.talent-trust.com">www.talent-trust.com</a></p>
    </div>
  </div>

  <div class="header">
    <p>
      <h2>COVID19 Medical Update for Missionaries, July 2020</h2>
    </p>
    <p>Significant issues remain even if you have insurance</p>
  </div>
</body>

</html>
0 голосов
/ 03 августа 2020

Я также относительно новичок в HTML и CSS, но я бы попробовал расширить ваш .top так, чтобы он занял всю ширину экрана. Таким образом float: right; позволит абзацам плавать до края экрана. 

.top{
    width: 100vw;
    margin: 0 auto;
    display: inline-block; 
}

Возможно, вы также захотите изменить выравнивание текста по центру влево. 

.top p {
    text-align: left;
}

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

.toright {
    float: right;
    padding: 0 40px 0 0;
}

Вы получите что-то вроде этого , которое масштабируется с ширину экрана.

Я не уверен, что это лучшее решение, но я думаю, что вы могли бы достичь того, что ищете.

/ ---- - РЕДАКТИРОВАТЬ ------ /

Если вы хотите выровнять свой .top div, вы можете использовать display: flex; вместо этого и установите поток типа row, таким образом maragin: 0 auto; выравнивает div по центру. 

.top{
    width: 600px;
    margin: 0 auto;
    display: flex;
    flex-flow: row;
}

Вы получите что-то вроде this

0 голосов
/ 03 августа 2020

Хотя понимание поплавков и встроенных блоков очень важно. Я бы также посоветовал изучить гибкий бокс.

Это идеальный пример использования для вступления. Вы сможете очень быстро получить то, чего хотите достичь.

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

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

...