-1

我有一个 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>

在此处输入图像描述documentIconImg)。三个较小的 div 应该在 cityHeader 下，彼此相邻并且都向右对齐。我尝试将它们浮动到右侧，将 text-align:right 添加到它们的父元素（weatherMain），没有任何效果。图中温度 div 为 9 度，weatherDescriptionHeader 为晴空，documentIconImg 为图标。

4

2 回答 2

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;
}
于 2019-02-17T21:46:04.350 回答
0

尝试这个：

#weatherMain {
  display: block;
  margin-bottom: 20px;
  text-align: right;
  float: right
}
于 2019-02-17T15:15:22.157 回答