Question

我意识到我在这里提出了两个不同的问题，但鉴于我对HTML和CSS缺乏经验，我感觉他们已经联系在一起了。如果不出意外，我不确定如何提出一个问题，同时确保我得到的答案与另一个问题兼容。

所以，这里是：

我正在制作一个小型计算器，它需要在不同窗口尺寸下看起来不错。我有一些按钮组需要保持在一起，而不同的分组根据窗口大小移动。以下是“良好行为”的屏幕截图：

Screenshot 1

内容与标题一起，没有奇怪的空格。

然后我们得到下一个行为：在窗口宽度稍微改变时，一些材料向下移动，但不是整个div - 标头停留：

Screenshot 2

如何让标题跟随内容？

最后，当窗口宽度变得更小时，标题也会向下移动：

enter image description here

这种行为很好，但我希望顶部的剩余内容能够利用额外的空间和水平居中。知道怎么样？我已经看过像How do you easily horizontally center a <div> using CSS?这样的问题，但它们似乎都需要增加我想要居中的元素的宽度，这打破了屏幕截图＃1中的行为。

这里可以看到一个例子：

screenshot 4

如何在不影响＃1的情况下修复屏幕截图＃2和＃3？

我当然也做了一个小提琴，但我认为截图会更好：

http://jsfiddle.net/eEPmw/

就是：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .incbut,.decbut,.rollButton{
        background-color:#FF961F;
      }
      .regular-checkbox{
        border-color:#FF961F;
      }

      body {
        background-color:#FCB41B;
        color:#753B08;
      }

      .modifiers{
        text-align:left;
        min-width:8em;
      }
      .center{
        margin-left:auto;
        margin-right:auto;
      }
      .inputField {
        max-width:2em;
        border:1px #bababa solid;
        vertical-align:middle;
        text-align:center;
      }
      .incbut,.decbut {
        border: 1px transparent solid;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: 4px 10px;
        position: relative;
        width: 2.5em;
      }
      .rollButton{
        border: 1px transparent solid;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: 4px 10px;
        position: relative;#FF0000
      }
      button:active{
        background-color:#FF0000;
      }
      .fieldCol{
        float:left;
        text-align:center;
        max-width=45%;
        height:9em;
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .incbut,.inputField, .decbut{
        min-height:2em;
        margin-right:0.5em; 
        margin-bottom:0.3em; 
      }
      h2{
        margin:0.1em;
        font-weight:500;
      }
      h2,button, input{
        font-family:inherit;
      }
      .outputField{
        padding:2px;
        margin:3px;
        border:1px #753B08 solid;
        width=2em;
        line-height:1.7em;
        white-space:nowrap; 
      }
      label {
        display: inline;
      }
      .checkBoxLabel{
        margin-left:5px;
        font-size:90%;
      }
      .regular-checkbox {
        display: none;
      }
      .regular-checkbox + label {
        border: 3px solid #FF961F;
        padding: 9px;
        background-color: #FFFFFF;
        display: inline-block;
        position: relative; 
        vertical-align:middle;
        margin: .1em;
      }
      .regular-checkbox:checked + label {
      border: 3px solid #FF961F;
      }
      .regular-checkbox:checked + label:after {
        content: '\2716';
        font-size: 1em;
        position: absolute;
        top: 0px;
        left: 10%;
        color: #753B08;
        font-weight: 600;
      }
      .checkboxbox2{
        width:8em;
        float:left;
      }
      .colContainer{
        text-alignment:center;
      }
      div.centre{
        text-align: left;
        width: 17em;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body style="text-align:center;font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;" class="center">      


<!--
<div class="colContainer">
<div class="centre">
-->
  <section id="bal_attacker" class="fieldCol">
    <h2>Attacker:</h2>
    <label for="bal_BS1">BS:</label> <br>
    <button type="button" id="bal_BS1inc" class="incbut"> + </button> 
    <input type="number" id="bal_BS1" value="1" class="inputField"> 
    <button type="button" id="bal_BS1dec" class="decbut"> - </button> <br> 
    <label for="bal_S">S:</label> <br>
    <button type="button" id="bal_Sinc" class="incbut"> + </button> 
    <input type="number" id="bal_S" value="1" class="inputField"/>
    <button type="button" id="bal_Sdec" class="decbut"> - </button> 
  </section>
  <section id="bal_defender" class="fieldCol" >
    <h2>Defender:</h2>
    <label for="bal_T">T:</label> <br>
    <button type="button" id="bal_Tinc" class="incbut"> + </button> 
    <input type="number" id="bal_T" value="1" class="inputField"> 
    <button type="button" id="bal_Tdec" class="decbut"> - </button>  <br> 
  </section>

<!--
</div>
</div>

-->
  <div>

  <section title="bal_Modifiers" class="modifiers">
    <h2 style="text-align:center;">Modifiers:</h2><br>
    <span class="checkboxbox2">
      <input type="checkbox" id="bal_harmConv" class="regular-checkbox" /><label for="bal_harmConv"></label>
      <label for="bal_harmConv" class="checkBoxLabel">Harm. Conv.</label>
    </span>
    <span class="checkboxbox2">
      <input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /><label for="bal_rrToHit"></label>
      <label for="bal_rrToHit" class="checkBoxLabel">R.r. to hit</label>
    </span>
    <span class="checkboxbox2">
      <input type="checkbox" id="bal_rrToW" class="regular-checkbox" /><label for="bal_rrToW"></label>
      <label for="bal_rrToW" class="checkBoxLabel">R.r. to wound</label>
    </span>
    <div style="clear: both;"></div>
  </section>
  <div style="clear: both;"></div>
  </body>
 </html>

我很抱歉这不是一个很小的工作示例 - 我已经尝试了一段时间来进一步减少它，但是当我尝试时，我似乎打破了一些东西。

Answer 1

轻松修复：

将所有内容放入持有者div（“换行”，有人称之为）：

<div id="holder">
   <section> .... </section>
   <section> .... </section>
   <section> .... </section>
</div>

然后制作持有人text-align:center;和display:inline-block;部分，您可能需要vertical-align:top;。

#holder{
   text-align:center;
}
section{
   display:inline-block;
   vertical-align:top;
}

从您的jsFidle中，您还要删除float:left;

中的.fieldCol

Here's your jsFiddle updated

Answer 2

如果您想使用您指定的响应性创建此布局，Flexbox就是您正在寻找的。我稍微简化了标记：

http://codepen.io/cimmanon/pen/djwsz

<div id="calculator">
    <section id="bal_attacker" class="fieldCol">
        <h2>Attacker:</h2>

        <div>
            <label for="bal_BS1">BS:</label> <br>
            <button type="button" id="bal_BS1inc" class="incbut"> + </button> 
            <input type="number" id="bal_BS1" value="1" class="inputField"> 
            <button type="button" id="bal_BS1dec" class="decbut"> - </button>
        </div>

        <div>
            <label for="bal_S">S:</label> <br>
            <button type="button" id="bal_Sinc" class="incbut"> + </button> 
            <input type="number" id="bal_S" value="1" class="inputField"/>
            <button type="button" id="bal_Sdec" class="decbut"> - </button>
        </div>
    </section>

    <section id="bal_defender" class="fieldCol" >
        <h2>Defender:</h2>

        <div>
            <label for="bal_T">T:</label> <br>
            <button type="button" id="bal_Tinc" class="incbut"> + </button> 
            <input type="number" id="bal_T" value="1" class="inputField"> 
            <button type="button" id="bal_Tdec" class="decbut"> - </button>
        </div>
    </section>

    <section title="bal_Modifiers" class="modifiers">
        <h2>Modifiers:</h2>

        <ul>
            <li><label><input type="checkbox" id="bal_harmConv" class="regular-checkbox" /> Harm. Conv.</label></li>
            <li><label><input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /> R.r. to hit</label></li>
            <li><label><input type="checkbox" id="bal_rrToW" class="regular-checkbox" /> R.r. to wound</label></li>
        </ul>
    </section>
</div>

这些应该是您需要的所有样式，我已经删除了与布局无关的所有纯粹美学风格（颜色，填充等）：

#calculator, section.modifiers ul {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  #calculator, section.modifiers ul {
    display: flex;
  }
}

#calculator section {
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
}

section.modifiers ul {
  padding: 0;
}

section.modifiers li {
  list-style-type: none;
  -webkit-flex: 1 0 33%;
  -ms-flex: 1 0 33%;
  flex: 1 0 33%;
  white-space: pre;
}

现在坏消息是，目前对Flexbox的支持相当差。目前，只有Opera，Chrome和IE10能够呈现此布局。

http://caniuse.com/#feat=flexbox

Answer 3

我会将标题放在父div中以及您希望它们保留的元素。

<div class="parent">
    <h1>Header</h1>
    <div class="content">
        //Whatever your content is
    </div>
</div>

至于居中，margin: 0 auto;是通常为此做的，但由于你将有一个浮点数，你可能需要编写一些脚本来基于{{来处理它父div的1}}和祖父母容器的宽度。

Answer 4

这是一个快速模拟可以用来开始。

你需要制作3列布局，col1 = attacker，col2 = defender， col3 =修饰符。这将确保当屏幕缩小过去时指向该列中的所有元素都将丢弃。接下来你需要使用列中的百分比，以便均匀分布内部的元素，或给每个col一个固定的和所有的宽度与父列相关的内部元素。

演示：http://jsfiddle.net/bRRqW/

HTML

<div class="wrapper">
    <div class="col">
        <h4>Attacker:</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dignissimos voluptatem in ut minima doloremque fuga qui saepe! Esse laudantium non voluptates deleniti soluta ab praesentium velit id omnis corrupti.</p>
    </div>
    <div c**strong text**lass="col">
        <h4>Defender:</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dignissimos voluptatem in ut minima doloremque fuga qui saepe! Esse laudantium non voluptates deleniti soluta ab praesentium velit id omnis corrupti.</p>
    </div>
    <div class="col">
        <h4>Modifier:</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dignissimos voluptatem in ut minima doloremque fuga qui saepe! Esse laudantium non voluptates deleniti soluta ab praesentium velit id omnis corrupti.</p>
    </div>
</div>

CSS

.wrapper {
    max-width: 600px;   
    margin: 0 auto;
}

.col { 
    width: 33.333333%;
    float: left;
    position: relative;
    text-align: center;
    min-width: 150px;
    background: red;
}

在不增加其大小的情况下使div居中并且保持标题与文本一起？

4 个答案: