Как мне сделать div'ы встроенными?

Question

Я использую обертку, но я в замешательстве.Я хочу, чтобы два resultbox div s соответствовали submit div.

. Посмотрите здесь:

http://jsfiddle.net/QtVwr/

Что я делаю не так?

Я не очень знаком с CSS.

Answer 1

Часть проблемы в том, что есть проблемы с вашим HTML.Вот начало:

1. убедитесь, что все div s закрыты.
2. удалите float s из вашей css
3. add display:inline-block;
4. удалите встроенные стили из вашего HTML.
5. исправьте .wrapper класс, чтобы он был .wrapper1 (соответствует HTML)

Итак, это болеевы хотите, я предполагаю:

.wrapper1 {
    height:70px;
    width: 800px;
    background: #ffffff;
    border: 1px solid grey;
    color: #BDBDBD;
}

.resultbox {
    width: 300px;
    background: #ffffff;
    color: #BDBDBD;
    display: inline-block;
}

.submit {
    height:15px;
    width: 32px;
    margin-top:10px;
    background: #ffffff;
    border: 1px solid;
    color: #BDBDBD;
    display: inline-block;

}

и HTML

<div class="wrapper1">
    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="width:35px;" >
       <div class="submit"></div>
    </div>    

</div>

Пример: http://jsfiddle.net/QtVwr/2/

Вам все равно придется возитьсяс этим.Но это только начало.

Answer 2

Чтобы сделать div встроенным, вы должны использовать следующий стиль CSS:

.mydiv{ display: inline; }

Примечание. Измените ширину вашей обертки (уменьшите ее), и вы увидите результаты

Answer 3

Существует несколько проблем с предоставленным вами кодом.

• Вы определили правила CSS для оболочки класса, но используете класс wrapper1 в своем HTML
• недостаточно ширины для обоих полей результатов и отправки
• Во втором окне результатов есть дополнительные кавычки style="margin-left: 5px; margin-top: 3px;""
• теги формы искажены и переплетаются с вашими тегами div
• теги форм не закрыты
• тег div для результата location не закрыт
• Поплавки должны быть очищены

вот скрипка

http://jsfiddle.net/e3dg6/

Answer 4

Почему у вас есть div для отправки внутри файла результатов? Почему оставлено поле: 10px, только с первым div?

Я бы сделал это так:

<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>

И установите ширину и высоту обертки, и позвольте остальным элементам div плавать. Это просто пример, я не совсем уверен, чего вы пытаетесь достичь. Я просто думаю, что твое вложение не в порядке.

Answer 5

Ширина ваших полей результатов вместе превышает ширину вашей обертки. Вам нужно либо сделать обертку шире, либо уменьшить ширину в полях результатов.