Question

当我的屏幕尺寸为768px以上时，我正在尝试将徽标左对齐，将多个段落右对齐。请参见下图。但是我尝试使用float和display inline block，但是整个top class会一直向左对齐。它不能集中到所有专家那里，因为我是CSS的新手，请提供帮助。谢谢。

我要尝试的目标

我在做什么

**

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>

**

Answer 1

我删除了display: inline-block（因为它不适用于margin: 0 auto）。我还使用flexbox对齐了您的项目。 Here是有关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>

Answer 2

我对HTML和CSS还是比较陌生，但是我想尝试的一件事是扩展您的.top以填充整个屏幕宽度。这样浮动：对；对。将使段落一直浮动到屏幕边缘。

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

您可能还希望将文本的对齐方式从中心向左更改。

.top p {
    text-align: left;
}

如果您不希望段落与屏幕的右边缘精确对齐，则可以添加一些填充。

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

您将实现this之类的东西，它随屏幕的宽度缩放。

我不确定这是否是最佳解决方案，但我认为您可以实现所需的目标。

/ ------编辑------ /

如果要对齐.top div，则可以使用display：flex;而是将流设置为row类型，这样maragin：0 auto;将div对准中心。

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

您将实现类似this

Answer 3

了解浮动和内联块非常重要。
我也建议学习弹性盒。

这是一个完美的入门用例。您将可以很快获得想要实现的目标。

CSS标头，左侧带有徽标，最右侧是多个段落

3 个答案: