Question

实际上它必须小于100％，因为100％将它设置在屏幕右侧。当我在平板电脑或笔记本电脑屏幕上加载我的页面时，它会放大到屏幕的左上角，如果我缩小，我会看到div只占据了左右一半的页面。我尝试过没有运气的最小宽度。

.first {
                height: 75px;
                width: 99.55%;
                background-color: red;
                margin-top: 19px;
                border: 3px yellow solid;
                min-width: 1000px;

                margin: 0 auto;

 }

 h2 {
                text-align: center;
                width: 100%;
 }
 <div class="animated fadeInUpBig first o">
        <h2>Need to fix positioning on mobile</h2>
 </div>
 <div class="animated fadeInUpBig first t">
        <h2>More work will be done tomorrow evening</h2>
 </div>
 <div class="animated fadeInUpBig first tr">
        <h2>Make it look half good by weekend</h2>
 </div>

Answer 1

如果您希望每个带有黄色边框的红色块跨越特定宽度（为90％，300px等），您可以将 box-sizing：border-box 添加到元素允许宽度包括填充和边框。但是由于.first（一个div）和h2都是块级元素，默认情况下它们将占用其父级的100％宽度。

我利用保证金巩固了保证金：0自动;保持边际：从覆盖边缘顶部。

边框的简写也应该是宽度，样式和颜色，所以我稍微改了一下。

最后，在大多数浏览器中，body元素的默认边距为8px，因此为了让您的框触摸浏览器窗口的外部，您需要添加最后一个body属性或使用常见的CSS重置（例如http://meyerweb.com/eric/tools/css/reset/）

.first {
  height: 75px;
  background-color: red;
  border: 3px solid yellow;
  min-width: 1000px;
  margin: 19px auto 0;
}

h2 {
  text-align: center;
}

body {
  margin: 0;
}

http://codepen.io/phawley/pen/amLRYK

100％宽度仅占移动或笔记本电脑屏幕的一半

1 个答案: