html - 响应式 div 底部的 Chrome 检查器和图像

Question

我有两个问题。

首先，哪个 css 规则会使一个 div 在 Chrome 检查器中高亮显示？我所知道的是 float: left 和 overflow: hidden 会使一个 div 在 Inspector 中显示/突出显示。例如，在下面链接的代码中，当您使用 Chrome 开发者工具并单击/悬停在 <div class="center"> 上时，应该突出显示的区域没有显示。如果您单击/悬停在 <div class="content"> 上或 <div class"image">您可以看到以浅蓝色突出显示的区域。

其次，如何让图片保持在包含内容的响应式 div 的底部？

HTML

<div class="center">
  <div class="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.

Suspendisse ac porttitor purus. Duis consequat condimentum tincidunt. Donec rhoncus maximus diam, ac bibendum neque mollis vitae. Vivamus vel mauris vel ex vulputate porta. Praesent convallis elit odio, et vehicula quam vulputate vitae. Aliquam porttitor porta justo sed semper. Nunc tristique tellus arcu, id vestibulum mi gravida id. Nulla a interdum dolor. Aenean mollis purus ac sagittis semper. Nulla ipsum neque, blandit eu tempus eget, condimentum id erat. Mauris vitae nibh in arcu ultrices porta ut id nisi. Donec dapibus eros vulputate magna ultrices bibendum. Fusce libero dui, malesuada eget gravida ut, semper vel mi.

Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
  </div>
  <div class="image">
        <img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
  </div>
</div>

CSS

.center {width: 100%; position: relative; display: block; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; }
.content {width: 50%; float: left; position: relative;}

.image { width: 50%; float: left; position: relative; height: 400px;}
.image img { position: absolute; bottom: 0; right: 0; vertical-align: bottom;}

@media (max-width: 979px) {
  .content {width: 100%; float: left; position: relative;}

.image { width: 100%; float: left; position: relative;}
}

实际代码:http://codepen.io/kikibres/pen/MwBxBK

如您所见，为了使图像贴在 div 的底部，我需要指定 div 的高度才能使图像正常工作。否则，它只是位于 div 的顶部/外部。如何在使高度响应的同时使其粘在底部？

此外，如果您在 codepen 的这段代码上使用 Chrome Inspector/Developer Tools，您还可以看到 <div class="center">没有突出显示。

Answer 1

好的，这是我的答案。

请看this fiddle首先。

问题 1 的答案:

我相信这是因为错误的 css 使用。如果你使用 float left，它不会占用空间，除非使用 clear: left; 清除它。

或者您可以在具有float:left 的元素的父容器上使用overflow: hidden。

问题 2 的答案:

抱歉，但我必须删除不必要的 css 以使图像在较小的屏幕中固定在底部。您也可以使用其他方法实现此目的，但这对我来说是最简单的方法。

html,
body{
   padding: 0;
   margin: 0;
}

.center {
    width: 100%;
    margin: 50px 0;
    padding: 15px;
    background-color: #63103C;
    color: #fff;
    overflow: hidden;
}
.content,
.image {
    width: 50%;
    float: left;
}

@media (max-width: 768px) {
    .content,
    .image{
        float: none;
        width: 100%;
    }
}