Question

请看一下我试图设计的这张表格并没有太多运气。让我说我来自一个桌子世界，我真的想学习这个CSS的东西。因为我已经使用了很长时间的表，我想我期待相同的结果。例如，如果我写一行数据然后开始一个新行，则底行永远不会从它的位置移动;这与css不同，行的内容保持不变。

现在，在这种情况下，我期待相同的行为，但我得到的是这些盒子正在跳起来以及每个方向。我想在这里做的就是将2个输入框并排放置，而另一个放在它下面。会发生什么是最后一行跳起来。我必须在右边的框中保持一个hight属性，以便推下下一个框。

我包含了所有的css，如果你在浏览器中查看它，你会希望看到这些盒子，因为我打算这样做。

#passage .input-right {
  border:1px solid #888;
  height:22px; <----------------------If you change this to something lower, the bottom box jumps up.
  width:99%;
  margin:0;
  padding:0;
}

以下是所有代码。

<style>
#passage {
  width:90%;
  height:350px;
  border:0px solid #000;
  color:black;
  margin:auto;
}
#passage p {
  font-size:11px;
}
#passage span.left {
  float:left;
  width:49%;
  border:0px solid #000;
}
#passage span.right {
  float:right;
  width:49%;
  border:0px solid #000;
}
#passage .select-left {
  border:1px solid #888;
  height:21px;
  width:99%;
  margin:0;
  padding:0;
}
#passage .input-right {
  border:1px solid #888;
  height:22px;
  width:99%;
  margin:0;
  padding:0;
}
#passage div#submit {
  float:left;
  width:100%;
  border:0px solid #000;
  margin-top:20px;
}
</style>

<div id="passage">
  <span class="left">
    Book<br />
    <select class="select-left" name="book">
      <option value="">Select..</option>
    </select>
  </span>

  <span class="right">
    Chapter<br />
    <input type="text" class="input-right" name="chapter-verse" />
  </span>

  <span class="left">
    Translation<br />
    <select class="select-left" name="translation">
      <option value="">Select...</option>
    </select>
  </span>

  <div id="submit">
    <form method="post" action="">
      <div>
        <input type="submit" value="submit" name="search" />
      </div>
    </form>
  </div>
</div>

Answer 1

我在很长一段时间内遇到过类似的问题，尤其是在主流浏览器中保持相同的问题。最后，我转而使用YUI Grids来简化这一切。还有其他几种CSS网格解决方案可用于简化它，但我没有亲自使用其他任何一种。

Answer 2

您需要了解的是块和内联元素之间的区别，它们都来自一个相当文本的哲学。像<div>或<p>这样的块元素会相互推挤，即它们不会出现在彼此相邻的“行”上，但行为更像段落。另一方面，内联元素（如<span>和<input>）的行为与文本类似。只要有空间，它们就在同一条线上彼此相邻排列，然后它们通过向下移动包裹到下一行，然后向左移动直到它们碰到障碍物并再次开始该过程。

将高度应用于内联元素将具有与将其应用于块级元素不同的结果。它可能不会立即明显影响内联元素，但可能会通过将它们推开而对其他附近的块级元素产生影响。

如果你把float抛到混合中，它会有点棘手，因为浮动元素的行为有点像块和内联元素。块级元素将在很大程度上忽略浮动元素，即块级元素内的浮动元素将不会对所述块级元素的总高度有贡献。 OTOH，内联元素将通过浮动元素与浮动元素“交互”（此行为是为嵌入在文本段落中的图像而设计的）。浮动元素在很大程度上表现得像内联元素。

-- div (block) -----------------------------------
| inline inline inline -- img (floated right) -- |
| inline inline inline |                       | |
| inline inline inline |                       | |
| inline inline inline ------------------------- |
| inline inline inline inline inline inline      |
| inline inline inline inline inline             |
--------------------------------------------------

-- div (block) -----------------------------------
| inline inline inline -- img (floated right) -- |
| inline inline inline |                       | |
-----------------------|                       |--
                       -------------------------
            (the float is not contributing to the div's height)

让两个输入彼此相邻并且下面有第三个输入的最简单方法可能是这样的：

-- div (block) ---------------------------
|   input (inline)      input (inline)   |
------------------------------------------
-- div (block) ---------------------------
|   input (inline)                       |
------------------------------------------

您可以像这样对HTML进行编码，也可以通过CSS操纵现有的HTML，使其表现得像这样（display: block / display: inline）。欢迎来到CSS世界。原则上并不是那么难，你只需要远离桌子思考。：）

如何保持元素到位

2 个答案: