Div标签超出了自己的边距 [英] Div tags extending beyond their own margins

问题描述

无论使用哪种浏览器，我都会遇到一个奇怪的问题(Chrome，IE，Opera Mobile Emulator是我尝试过的问题).我的div嵌套在其他两个div中，如下所示.这些div均设置为100％宽度.最里面的元素漂移到父div的外部(但保持在其下方").我没有漂浮任何东西，所以我不明白为什么要这么做.使用溢出:隐藏看不见任何效果.下图显示了Google Chrome浏览器的inspect元素功能，该功能显示了超出边框的元素和填充(以桃红色显示).我希望一切都在应有的范围之内.我开始认为这可能与我正在做的媒体查询有关.我使用这些是因为一个百分比的宽度不会总能给我我想要的确切宽度.代表我来说这可能是可耻的愚蠢，但有没有人见过这样的事情?

I have a weird issue that occurs regardless of browser (Chrome, IE, Opera Mobile Emulator are what I've tried). I have divs nested within two other divs, as shown below. These divs are all set to 100% width. The innermost element drifts outside of (but stays "under") the parent divs. I'm not floating anything, so I don't see why it is doing this. Using overflow: hidden has no effect that I could see. The image below shows Google Chrome's inspect element feature, which shows the element and padding extending beyond the margins (shown in the peach color). I want everything to be within the margins as it should be. I'm starting to think it may be something with the media queries I'm doing. I am using these because a single percentage width won't always give me the exact width I want. It's probably something shamefully stupid on my behalf, but has anyone ever seen anything like this?

@media all and (max-width:960px)
{.container{width: 900px; } }

@media all and (max-width:1280px)
{.container{width: 1024px; }}

/*More media queries for a few other max resolutions*/

.container
{
  height: auto;
  min-width: 300px;
  max-width: 1440px;
  margin: 20px auto 0px auto;
  border: 2px solid #13192D;
}

.midwrapper
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}

.innermost
{
  width: 100%;
  margin: 8px auto;
  padding: 8px 8px;
  border: 2px solid #13192D;
} 

推荐答案

添加

box-sizing: border-box;
-moz-box-sizing: border-box;

到

.innermost

这篇关于Div标签超出了自己的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！