Question

我正在尝试制作一个响应式单选按钮网格，左侧有一个标签“列”。使用下面的HTML和CSS，使窗口变窄最终会使无线电按预期包裹到两列，然后是一列。但是，直到他们的大部分文本都在屏幕右侧才会发生这种情况。

似乎浏览器认为.controlContainer的右边缘位于错误的位置，大致偏离了左侧标签“column”的宽度。在Firefox ESR 31.4.0，Chrome 40.0.2214.115 m和IE 11中也会出现相同的行为，因此它似乎不是浏览器错误。

下面的示例代码包含一个复选框，它应用了一个非常时髦的解决方法，这确实有效，但我希望有人可以指出我的方向，不需要那种废话。

正如在注释掉的CSS中所指出的，将position：absolute应用于.controlContainer而不是给定的解决方法，但是它周围的元素会崩溃，因为它不占用空间。

请注意，此处的“运行代码段”工具由于其自身的CSS和嵌入式iframe的受限大小而无法正确显示，因此您需要将代码复制到本地文件中，或view it on CSSDeck

<!DOCTYPE html>
<html>
<head>
  <title>Float wrapping</title>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
    *, *:after, *:before {-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    body, form, pre, div, span, label {font-family: sans-serif; font-size: 13px; margin: 0; padding: 0;}
    .fieldContainer {white-space: nowrap;}
    .labelContainer {display: inline-block; font-weight: bold; text-align: right; vertical-align: top; width: 150px;}
    .controlContainer {display: inline-block; max-width: 800px;}
    .controlContainer label {float: left; padding-right: 10px; width: 200px;}
    .controlGridText {display: inline-block; margin: 0 2.25em 5px 0; white-space: normal;}
    input {float: left;}
    .hackyFix .controlContainer {left: -150px; margin-left: 150px; position: relative;}
    /* .hackyFix .controlContainer {position: absolute;} can do this instead of above hack, but then other elements collapse into its space */
    /*.hackyFix .fieldContainer {overflow: hidden;} hides horizontal scrollbar, but shouldn't have to do this */
  </style>
</head>
<body>
<pre>
Make the window narrower, and eventually the radios wrap to two columns, then one.
However, that doesn't happen until much of their text is offscreen on the right.
Also note that the horizontal scrollbar appears before it's actually needed.
Check the 'Apply hacky fix' box, and the only solution I've found gets applied, but it's pretty funky, and doesn't fix the scrollbar.
See commented-out CSS for some other notes.
Better solutions are most welcome!
</pre>
<form id="form">
<hr>
<label>Apply hacky fix<input type="checkbox" id="cbHack" onclick="document.getElementById('form').className = this.checked ? 'hackyFix' : ''"></label>
<hr>
<div class="fieldContainer">
  <div class="labelContainer" style="">Favorite Lizard</div>
  <div class="controlContainer">
    <label>
      <input type="radio" value="1" name="r1">
      <span class="controlGridText">1 Gecko lorem ipsum</span>
    </label>
    <label>
      <input type="radio" value="2" name="r1">
      <span class="controlGridText">2 Dolor sit amet</span>
    </label>
    <label>
      <input type="radio" value="3" name="r1">
      <span class="controlGridText">3 Iguana consectetur adipiscing elit </span>
    </label>
    <label>
      <input type="radio" value="4" name="r1">
      <span class="controlGridText">4 Chameleon praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>
    </label>
    <label>
      <input type="radio" value="5" name="r1">
      <span class="controlGridText">5 Morbi id elit massa</span>
    </label>
    <label>
      <input type="radio" value="6" name="r1">
      <span class="controlGridText">6 Maecenas fringilla quis odio id auctor pellentesque laoreet</span>
    </label>
    <label>
      <input type="radio" value="7" name="r1">
      <span class="controlGridText">7 Basilisk</span>
    </label>
    <label>
      <input type="radio" value="8" name="r1">
      <span class="controlGridText">8 Tuatara quam enim ornare urna</span>
    </label>
    <label>
      <input type="radio" value="9" name="r1">
      <span class="controlGridText">9 Suscipit faucibus nunc dolor vel arcu</span>
    </label>
  </div>
</div>
<div>This is some more text, here just to see what happens to objects below the fields.</div>
</form>
<script>
document.getElementById('cbHack').checked = false;
</script>
</body>
</html>

Answer 1

See this fiddle。该示例中的一个问题是它没有使用现代框架所基于的box model，这意味着填充被添加到元素的外部而不是内部。如果没有打开，这会使基于百分比的网格难以使用。

我通过包含bootstrap css修补了你的版本，但你真的只需要盒子模型来修复它。这是我改变的另一部分：

.controlContainer {
    max-width: 800px;
    width: calc(100% - 105px);
}

这样可以抵消最喜欢的蜥蜴＆＃34;标签。如果我是你，我会切换到基于百分比的网格，以使这更容易。父容器可以有3列和9列网格，而标签可以是大型的3列网格，2个中型，1个小型。

漂浮包装＆＃34;太晚了＃34;

1 个答案: