Question

首先，这是所讨论的特定标记/样式的jsfiddle。

主要问题是为什么img和文本框（dark_block）没有相同的边距。两者都设置为容器div的100％宽度，所以我不确定是什么。介意一下？

我还在试图弄清楚和谷歌搜索的其他事情（到目前为止）并没有帮助我：

当文本框在照片容器的内嵌（左侧）时，如何使其与照片容器的高度相同
如果图像的宽度小于照片容器，如何使其水平和垂直居中？
为了便于访问，我可以在@media标记之前创建一个非响应版本的css吗？

抱歉，我对网络开发有点新意，任何帮助都一定会受到赞赏。如果代码片段中的任何内容看起来很糟糕，请打电话给我！除了解决手头的问题，我还想学习一些最佳实践。尤其是显示器类型，很难将我的头部缠绕在他们周围。

感谢您花时间看这个！

约翰

CODE：

<div id="home_top_container">
    <div id="photo_slider">
        <img src="redacted">
    </div>
    <div id="dark_block"></div>
</div>

#home_top_contianer {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
@media screen and (min-width: 800px){
    #photo_slider{
        float:right;
        background-color: #cccccc;
        padding: 0px;
        width: 69%;
        min-width: 500px;
        display: inline-block;
    }
}

@media screen and (max-width: 799px){
    #photo_slider{
        float:none;
        background-color: #cccccc;
        padding: 0px;
        width: 100%;
        min-width: 500px;
        display: inline-block;
    }
}
@media screen and (min-width: 800px){
    #dark_block {
        float:left;
        background-color: #383838;
        padding: 10px;
        width: 28%;
        display: inline-block;
    }
}
@media screen and (max-width: 799px){
    #dark_block {
        float:left;
        background-color: #383838;
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        min-height: 200px;
        display: inline-block;
    }
}

img {
    max-width: 100%;
    margin: 0px;
}

Answer 1

您需要阅读CSS box model。元素的width指的是其内容。然后将填充，边框和边距添加到其中。这意味着您的#dark_block实际上是100% + 2*10px宽。

正确的解决方案是将#dark_block设置为display: block，同时删除float和width。 width的默认值为auto，它会自动使块尽可能宽而不会溢出。 Web开发中的经验法则：如果您提供display: block元素width: 100%，那么您做错了。

另一个简单的解决方案是在box-sizing: border-box;上设置#dark_block，但box-sizing是一个相对较新的属性，因此如果您需要支持旧版浏览器，它将无效。

让他们达到同样的高度，并不是一件小事。您可以使用display: table-* properties并向其height: 100%提供，但这需要您将#dark_block放在HTML中。

Quick example：

<div id="home_top_container">
  <div>
    <div id="dark_block"></div>
    <div id="photo_slider">
        <img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
    </div>
  </div>
</div>

#home_top_container > div > div {
    display: table-cell;
    width: 50%;
    border: 1px solid red;
}

img {
    width: 100%;
}

再次居中垂直并不是CSS中的一件小事。您最好的选择是将display: table-cell与vertical-align: middle一起使用。

当然。特别是您应该将所有媒体变体共有的所有属性移到媒体规则之外，这样就不会重复这些属性。

此外，无需围绕每条规则重复媒体规则。只有一个媒体规则：

@media screen and (min-width: 800px) {
    #photo_slider {
        /* ... */
    }
    #dark_block {
        /* ... */
    }
}
@media screen and (max-width: 799px) {
    #photo_slider {
        /* ... */
    }
    #dark_block {
        /* ... */
    }
}

自适应样式：使用@media标签移动img下方的文本框（边距）

1 个答案: