Проблема с плавающей точкой: правильно с многоколоночной разметкой? - PullRequest
0 голосов
/ 16 сентября 2011

Я хочу поместить содержимое li в 2 столбца и хочу использовать float:right; в fieldset, но это float создает проблему в отображаемых столбцах.как с использованием float:right эта проблема может быть решена?

Пример: http://jsfiddle.net/w2XWu/

ol#hi{
    -o-column-count: 2;
    -icab-column-count: 2;
    -khtml-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 3;
    -o-column-rule: 1px solid black;
    -moz-column-rule: 1px solid black;
    -webkit-column-rule: 1px solid black;
    column-rule: 1px solid black;
}
fieldset {
    background-color: #EEF3F7;
    position: relative;
    float: right;           /*problem is this line*/
    direction: rtl;
    border-radius: 5px;
    border: 1px solid #EAEAEA;
    margin: 10px 5px 0 0;
    display:inline;
}


<fieldset>
    <legend>
    hi </legend>
    <div class="find_input mediumCell">
        <div class="column">
            <ol id="hi">
                <li>Hello</li>
                <li>how</li>
                <li>what</li>
                <li>Normalized</li>
                <li>Mootools </li>
                <li>CSS</li>
                <li>attributes </li>
                <li>More </li>
                <li>Library</li>
                <li>Choose </li>
                <li>Please </li>
                <li>Framework</li>
            </ol>
        </div>
    </div>
</fieldset>

1 Ответ

0 голосов
/ 16 сентября 2011

Вы можете исправить это, добавив width:100%; (или любую ширину, которую вы хотите, чтобы набор полей был) к вашему стилю набора полей

Пример: http://jsfiddle.net/DyU9S/1/

UPDATE

Причина, по которой это происходит:

Вы установили отображение набора полей на inline, поэтому набор полей будет увеличиваться только до той ширины, о которой вы говорите, или до наименьшего количествапространство это может занять.Если вы хотите, чтобы он вырос до 100%, либо сделайте отображение block или inline-block.Кроме этого выберите ширину, которую вы хотите, чтобы набор полей был, и она будет этой шириной.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...