2

首先，这里是有问题的特定标记/样式的jsfiddle。

主要问题是为什么 img 和文本框 (dark_block) 没有相同的边距。两者都设置为容器 div 的 100% 宽度，所以我不确定发生了什么。介意看看吗？

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

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

抱歉，我对 Web 开发有点陌生，任何帮助都将不胜感激。此外，如果代码片段中的任何内容看起来都做得很糟糕，请叫我出来！除了解决手头的问题之外，我还想学习一些最佳实践。尤其是显示类型，很难把我的头包在他们身上。

感谢您花时间看这个！

约翰

代码：

<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;
}
4

1 回答 1

0

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

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

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

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

快速示例：

<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-cellwith vertical-align: middle。

最肯定的。特别是您应该将所有媒体变体共有的所有属性移到媒体规则之外，这样您就不会重复它们。

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

@media screen and (min-width: 800px) {
    #photo_slider {
        /* ... */
    }
    #dark_block {
        /* ... */
    }
}
@media screen and (max-width: 799px) {
    #photo_slider {
        /* ... */
    }
    #dark_block {
        /* ... */
    }
}
于 2013-07-29T08:50:49.753 回答