CSS - Проблемы с перемещением и центрированием 3-х элементов в контейнере. (Содержит код и грубую диаграмму)

Question

У меня проблемы с центрированием 3-х делителей, которые находятся, так сказать, в «контейнере».

Это должно выглядеть примерно так (простите мой грубый пример):

    ______________________
   |  ___    ___     ___  |
   | |___|  |___|   |___| |
   |______________________|

Однако проблема, с которой я столкнулся, заключается в том, что я, похоже, не могу понять, что CSS должен выложить эти 3 деления, как в моем грубом примере.

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

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

Вот код, относящийся к этому:

.searchResult {
    padding: 1% 2% 1% 2%;
    margin: 2% 2.5%;
    width: auto;
    height: 200px;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizDesc {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 35.5%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizAddr {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizCont {
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

Первый бит css относится к контейнеру,Следующие 3 относятся к трем элементам в порядке слева направо.Таким образом, мой пример выглядит примерно так:

    ______________________
   | ___    ___     ___   |
   ||___|  |___|   |___|  |
   |______________________|

Если кто-то захочет немного мудрости и даст мне какой-то вклад в это, так как я уверен, что ответ довольно прост, он был бы очень признателенспасибо !!

Answer 1

Я думаю, что было бы проще добавить туда еще один div ... Таким образом, внешний div на вашей диаграмме будет управлять тем, как div работает в контейнере / теге, который его содержит. Элемент div, который вы бы добавили, будет окружать 3 блока и будет иметь гибкость для полей / float / etc для внешнего div.

Предполагая, что "searchResult" является внешним div, структура выглядит так:

<div class="searchResult">
    <div class="divClassToAdd">
        <div class="bizDesc">...</div>
        <div class="bizAddr">...</div>
        <div class="bizCont">...</div>
    </div>
</div>

Answer 2

Это должно сделать это:

HTML

<div id="dialogbox">
  <div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS

#container{
  margin: 0 auto;
}
.box{
  width: 200px; height: 200px;
}

Все, что вы делаете с внутренними полями, не имеет значения, если контейнер имеетнаценка авто