Question

我想布置我的网站标题，左边是图片，左边是一些文字...

......或右下角。

...甚至更好，让图像DIV高度完全适合父DIV：

...

不幸的是我无法理解：

我将分两部分来解决这个问题。第一部分是将我的两个内部元素浮动为一个简单的：

  float:left;

两个内部DIV上的

。

然后用第二个内部DIV，我正在玩位置

  position:fixed;
  right:0;

但是，如果我还添加 bottom：0 ，那么我会得到类似的结果：

第二个DIV已跳过外部DIV的。如何使其定位相对于父DIV？我尝试过position：inherit / absolute / fixed，似乎没什么用。我是否必须在父DIV上设置一些内容？

这是我的JSFiddle：http://jsfiddle.net/c0gjq2fb/8/

有什么我不理解的吗？有回家留言吗？无论我怎么努力，我似乎都不会理解HTML / CSS布局：（

Answer 1

您可以使用Flexbox

.outer {
  border: 5px solid red;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.inner2 {
  align-self: flex-end;
  border: 5px solid green;
}
img {
  border: 5px solid blue;
}

<div class="outer">
  <img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
  <div class="inner2">Some text</div>
</div>

Answer 2

由于height: 100%;值导致边框混乱。如果你删除边框，那很好。

http://jsfiddle.net/j9p78a91/

Answer 3

添加

position:relative;
top:220px;

到css类.inner2。

.outer {
  border-style: solid;
  border-width: 5px;
  border-color: red;
  width: 100%;
  height: 280px
}

.inner1 {
  border-style: solid;
  border-width: 5px;
  border-color: blue;
  float:left

}

.inner2 {
  border-color: green;
  border-style: solid;
  border-width: 5px;
  float:right;
  position:relative;
  right:0;
  top:220px;


}

<div class="outer">

  <div class="inner1">
    <img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
  </div>

  <div class="inner2">
    Some text
  </div>
</div>

试图将div放在水平布局中

3 个答案: