响应造型：使用移动文本框下方IMG（利润率）所有的

Question

首先@media标签，这里的jsfiddle有问题的特殊标记/造型。

主要问题是，为什么IMG和文本框（dark_block）不具有相同的幅度。两者都设置为容器div的100％宽度，所以我不确定发生了什么。介意看看？

其他的事情我还在试图找出和谷歌搜索（迄今）并没有帮助我：

• 当文本框是线（向左）照片的容器，如何如果图像的宽度小于图片容器，我该如何获得与图片容器相同的高度
• 如果图片的宽度小于图片容器，我该如何让它水平和垂直居中？
• 为了可访问性，我可以在@media标签之前创建一个无响应的css版本吗？

对不起，我是一个新的web开发，任何帮助肯定会被赞赏。此外，如果代码片段中的任何内容看起来非常糟糕，请打电话给我！除了解决手头问题之外，我还想学习一些最佳实践。尤其是显示器类型，我很难将它们包裹在他们的周围。

感谢您花时间看看这个！

约翰

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，这会自动使块尽可能宽而不会溢出。网站开发中的经验法则：如果你给display: block元素width: 100%，那么你做错了什么。

另一种简单的解决办法是设置#dark_blockbox-sizing: border-box;，但是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 { 
     /* ... */ 
    } 
}