Как сохранить элементы на месте

Question

Пожалуйста, взгляните на эту форму, которую я пытаюсь создать без особой удачи. Позвольте мне сказать, что я из мира таблиц и действительно пытаюсь изучить этот материал CSS. Поскольку я использовал таблицы так долго, я думаю, что ожидаю таких же результатов. Например, если я напишу строку данных, а затем начну новую строку, нижняя строка никогда не сдвинется с того места, где она находится; то есть в отличие от css содержимое строк остается на месте.

Теперь, в этом случае, я ожидаю того же поведения, но то, что я получаю, это те ящики, которые подпрыгивают и в разные стороны. Все, что я пытаюсь сделать здесь - это поставить 2 поля ввода рядом друг с другом, а другое под ним. Что происходит, так это то, что последний ряд подпрыгивает. Я должен сохранить атрибут высоты в поле справа, чтобы опустить следующий блок.

Я включаю все 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

Что вам нужно понять, так это разницу между блочными и встроенными элементами, и оба они основаны на философии, ориентированной на текст. Блочные элементы, такие как <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-код таким образом, либо манипулировать существующим HTML-кодом через CSS, чтобы вести себя так (display: block / display: inline). Добро пожаловать в мир CSS. Это не так уж сложно в принципе, вам просто нужно уйти от мышления за столом. :)

Answer 2

Я боролся с подобной проблемой в течение длительного времени, особенно из-за того, что она сохранялась во всех основных браузерах. В конце концов я переключился на использование YUI Grids , чтобы упростить все это. Есть несколько других CSS-решений для сетки, которые также могут упростить его, но я лично не использовал ни одного из других.