Question

我有一个div在“main”div中居中的页面。主div是全宽度，内部div的最大宽度等于“main”div的宽度。当用元素填充它时，它只填充大约一半的屏幕。我做错了什么？

编辑：我注意到有些人误解了上面的文字。我的元素（浮动：左）将在4个之后相互移动。那时div大约是1000px宽。这意味着最大宽度不是100％，但不知何故是50％。我检查了浏览器和CSS，但没有其他选择器覆盖这些值。

CSS :(在sass中）

#main
  z-index: 0
  width: 100%
  min-height: calc( 100% )
  background: #FFFFFF
  position: absolute
  left: 0px
  top: 0px
  padding: 50px 0px
  text-align: center
  div.container
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    display: block
    max-height: 100%
    margin: 0 auto
    width: auto
    max-width: 100%
    overflow-y: auto
    overflow-x: hidden
    text-align: left

div.box
  width: 220px
  height: 200px
  border: 1px solid #5774FF
  padding: 19px
  margin: 10px
  float: left
  box-shadow: 1px 1px 4px #CCC

HTML：

<div id="main">
    <div class="container">
        <div class="box">
            <form action="/save" method="post">
                <input type="text" placeholder="code" name="name"/>
                <select name="education">
                    <option value="3">option 3</option>
                </select>
                <button type="submit">save</button>
            </form>
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</div>

Answer 1

max-width会阻止元素比指定的更宽，但不会使它们更宽。

Answer 2

我对您的function isConnectionKeepAlive() { if(getallheaders()["Connection"] == "Keep-Alive") { return true; } else { return false; } }进行了一些更改。希望它有所帮助：

css

#main {
  z-index: 0;
  width: 100%;
  min-height:100%;
  background: #FFFFFF;
  left: 0px;
  top: 0px;
  padding: 50px 0px;
  text-align: center;
  }
  div.container{
    margin-left: 0 auto;
    display: block;
    max-height: 100%;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    }

div.box{
    width: 240px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #5774FF;
    padding: 19px;
    margin-bottom: 10px;
    display: block;
    box-shadow: 1px 1px 4px #CCC;
    float: none;}

Answer 3

您使用以下代码集中container：

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

当你给一个元素position: absolute并给出一个left: 50%时，它会自动移动它的后续子节点（如果孩子没有position: absolute）到{从左边开始{1}}。

如果您希望容器占据整个宽度，则必须删除以下内容：

50%

Answer 4

您基本上告诉浏览器容器div的最大宽度为其父级的100％。这使得容器div变得流畅，因此它将响应不同的屏幕尺寸。

它只占屏幕的一半左右，因为它会延伸到其子元素所需的大小。

最大宽度的div不取最大宽度

4 个答案: