我想布局我的网站标题,其中图像位于左侧,一些文本位于左下角......
...或右下角。
...或者更好的是,让图像 DIV 高度完全适合父 DIV :
...
不幸的是我无法克服这个:
我分两部分来讨论这个问题。第一部分是用一个简单的: float 我的两个内部元素:
float:left;
在两个内部 DIV 上。
然后,在第二个内部 DIV 中,我正在调整位置
position:fixed;
right:0;
但是,如果我还添加 bottom:0 那么我会得到这样的结果:
第二个 DIV 已跳转到外部 DIV 的外部。如何使定位相对于父 DIV ?我尝试过位置:继承/绝对/固定,但似乎没有任何效果。我必须在父 DIV 上设置某些内容吗?
这是我的 JSFiddle:http://jsfiddle.net/c0gjq2fb/8/
是不是有什么我没理解的地方?有带回家的消息吗?无论我多么努力,我似乎永远无法理解 HTML/CSS 布局:(
最佳答案
您可以使用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>
关于html - 尝试将 div 放置在水平布局中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36957057/