html - 尝试将 div 放置在水平布局中

标签 html css

我想布局我的网站标题,其中图像位于左侧,一些文本位于左下角......

enter image description here

...或右下角。

enter image description here

...或者更好的是,让图像 DIV 高度完全适合父 DIV :

enter image description here

...

不幸的是我无法克服这个:

enter image description here

我分两部分来讨论这个问题。第一部分是用一个简单的: float 我的两个内部元素:

  float:left;

在两个内部 DIV 上。

然后,在第二个内部 DIV 中,我正在调整位置

  position:fixed;
  right:0;

但是,如果我还添加 bottom:0 那么我会得到这样的结果:

enter image description here

第二个 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/

相关文章:

jquery - 页面一部分的 html2canvas 屏幕截图

javascript - 响应式 Javascript 图像大小调整

html - 添加填充以选择,但不添加选项标签

css - ionic 2 : Display array of items in a 3x3 table

html - Internet Explorer 的 Css 问题

javascript - 更改 td 内容以选择,反之亦然

css - 当字体系列为 :'Goudy OldStyle' 时,IE9 会导致所有网页文本呈现为斜体

html - HTML 表格单元格溢出

javascript - fontawesome-webfont 和 webpack.js 配置

jquery - 在浏览器边缘从左向右滑动跳转