Question

我有一个cityHeader（在这张照片中是洛杉矶）。在cityHeader下有一个名为weatherMain的div，其中包含三个较小的div（id = temperature，id = weatherDescriptionHeader和id = documentIconImg

   

 #cityHeader {
      float: right;
      display: block;
      margin: 5px;
      font-size: 42px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 

     }

    #weatherMain {
      display: block;
      margin-bottom: 20px;
      text-align: right;
    }

    #weatherMain div {
      display: inline-block;
    }

    #weatherDescriptionHeader {
      font-size: 28px;
      vertical-align: 50%;
    }

    #temperature {
      font-size: 38px;
      vertical-align: 25%;
    }

<h1 id="cityHeader"></h1>
     <div id="weatherMain">
              <div id="temperature"></div>
              <div id="weatherDescriptionHeader"></div>
              <div><img id="documentIconImg" /></div>
            </div>

enter image description here documentIconImg）。三个较小的div应该位于cityHeader下，彼此相邻并全部向右对齐。我试图将它们向右浮动，在其父元素（weatherMain）上添加text-align：right，没有任何效果。图片温度div中为9度，weatherDescriptionHeader为“晴空”，documentIconImg为图标。

Answer 1

这是您要寻找的：https://codepen.io/dillonbrannick/pen/XOoNjp

我添加了背景色只是为了容易识别元素。只需将您的背景图片放入#weatherMain中，然后删除其他背景颜色，它就可以正常工作。我在#weathermain中添加了一个边距，只是为了在页面中间显示它。

我还向h1标签添加了margin：0，因为h1自动向其添加了一些干扰的CSS样式。

HTML：

<div id="weatherMain">
    <h1 id="cityHeader">Hello World</h1>
    <div id="temperature">Howya</div>
    <div id="weatherDescriptionHeader">Hola</div>
</div>

CSS：

#weatherMain {
  background-color:red;
  text-align: right;
  margin: 10% 20% 10% 20%
}
#cityHeader {
  background-color:yellow;

 }
h1{
  margin:0;
  font-size:45px;
  font-family: "Lucida Sans Unicode", "Lucida   Grande", sans-serif; }

#temperature {
  background-color:green;
  font-size: 38px;
}
#weatherDescriptionHeader {
  background-color:lightblue;
  font-size: 28px;
}

Answer 2

尝试一下：

#weatherMain {
  display: block;
  margin-bottom: 20px;
  text-align: right;
  float: right
}

如何将div右对齐

2 个答案: