响应式div

Question

我有两个问题。

首先，哪个css规则会在Chrome Inspector中突出显示div？我所知道的是float：left和overflow：hidden将在Inspector中显示/突出显示div。例如，在下面链接的代码中，当您使用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顶部/外部的div之外。如何在高度响应的同时使其粘在底部？

此外，如果您在codepen上对此代码使用Chrome Inspector / Developer Tools，您还会看到<div class="center">未突出显示。

Answer 1

好的，这是我的答案。

请先查看this fiddle。

对问题1的回答：

我认为这是因为错误的css使用而发生的。如果你使用float left，除非使用clear: left;清除它，否则它不会占用空间。

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

对问题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%;
    }
}

Answer 2

Position image at bottom of variable height div对我的问题是一个非常好的答案。在我发布这个问题之前，当我在寻找答案时，我一开始找不到它......

关键是.clear {clear：both;你把<div class="clear"></div>放在主div中的前两个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.

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 class="clear"></div> <!-- Where you should put it -->
</div>

CSS

    .center {width: 100%; position: relative; background-color: #dd1a83; }
.content {width: 50%; float: left; position: relative;}

.image { width: 50%; float: left; }
.image img { position: absolute; bottom: 0; right: 0;  border: 3px solid #000;}
.clear { clear: both; } /* Don't forget to put it there too*/

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

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