css center выровнять элементы с помощью float

Question

css center выровнять элементы с помощью float

0

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

HTML

<body>
    <div class="floaty">Some Contents!</div>
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

CSS

.floaty {
    border:solid 1px green;
    float: right;
}
.listStuff ul {
    text-align:center;
    list-style-type:none;

    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
display:inline-block;

    border: solid 1px red;
}

Я как бы новичок во всем этом бизнесе HTML/CSS, и я начинаю думать, что я лаяю неправильное дерево. Можно ли это сделать?

Fiddle Here: http://jsfiddle.net/YUn39/1/

A.R. 08 май 2014, в 19:42

Источник

0

Можете ли вы предоставить изображение, которое бы показывало именно то, что вы хотите, вместо этого? Это поможет проиллюстрировать.
Rachel9494 08 май 2014, в 16:54
0

Вы всегда можете абсолютно позиционировать элемент, чтобы вывести его из потока. Другие элементы не будут принимать это во внимание - jsfiddle.net/7JBKT
Josh Crozier 08 май 2014, в 16:55
0

@JoshCrozier Я думаю, что так, но если макет становится более сложным (и это на практике), у меня будут проблемы с выбором этой позиции.
A.R. 08 май 2014, в 16:57
0

@Rachel9494: Rachel9494: красные рамки должны быть в центре синей рамки.
A.R. 08 май 2014, в 16:57
0

Наверное, тогда я не уверен, что понимаю, если они будут абсолютно центрированы, разве это не рискнет отрезать зеленую коробку? Или вы имеете в виду, что вы хотите быстро изменить размер зеленой рамки, чтобы этого не произошло?
Rachel9494 08 май 2014, в 16:59

Показать ещё 3 комментария

Теги:

html

css

css3

2 ответа

1

Изменит ли ваш класс.floaty абсолютную позицию проблемой или вы пытаетесь достичь чего-то еще?

body {
    position: relative;
}
.floaty {
    border:solid 1px green;
    position: absolute;
    right: 0;
}

http://jsfiddle.net/YUn39/2/

Seanevd 08 май 2014, в 14:11

0

да, это похоже на это. Я думаю, я думал, что абсолютное позиционирование означает абсолютное для всего документа ...
A.R. 08 май 2014, в 17:06
0

до тех пор, пока родительский элемент имеет установленную позицию, дочерние элементы с position: absolute будут позиционироваться в соответствии с пространством родительского элемента. это решение хорошо, пока .floaty является прямым потомком тела. в противном случае используйте обертку, как мой ответ ниже
Chris M 08 май 2014, в 17:08
0

CSS: где «абсолют» означает «относительный», но не абсолютно :)
A.R. 08 май 2014, в 17:12

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы предоставить изображение, которое бы показывало именно то, что вы хотите, вместо этого? Это поможет проиллюстрировать.
Вы всегда можете абсолютно позиционировать элемент, чтобы вывести его из потока. Другие элементы не будут принимать это во внимание - jsfiddle.net/7JBKT
@JoshCrozier Я думаю, что так, но если макет становится более сложным (и это на практике), у меня будут проблемы с выбором этой позиции.
@Rachel9494: Rachel9494: красные рамки должны быть в центре синей рамки.
Наверное, тогда я не уверен, что понимаю, если они будут абсолютно центрированы, разве это не рискнет отрезать зеленую коробку? Или вы имеете в виду, что вы хотите быстро изменить размер зеленой рамки, чтобы этого не произошло?
да, это похоже на это. Я думаю, я думал, что абсолютное позиционирование означает абсолютное для всего документа ...
до тех пор, пока родительский элемент имеет установленную позицию, дочерние элементы с position: absolute будут позиционироваться в соответствии с пространством родительского элемента. это решение хорошо, пока .floaty является прямым потомком тела. в противном случае используйте обертку, как мой ответ ниже
CSS: где «абсолют» означает «относительный», но не абсолютно :)

Chris M · Accepted Answer · 2014-05-08T14-02-00.000Z

используйте обертку, как в этой скрипке:

<div class="wrapper">
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="floaty">Some Contents!</div>
</div>

.wrapper {
    position:relative;
    width:100%;
    height:auto;
}
.floaty {
    position:absolute;
    top: 0;
    right: 0;
    border:solid 1px green;
}
.listStuff ul {
    position:relative;
    text-align:center;
    list-style-type:none;
    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
    display:inline-block;
    border: solid 1px red;
}