Сделать другие div не иметь свой поток, измененный плавающим дивизоном

StackOverflow https://stackoverflow.com/questions/6352679

  •  28-10-2019
  •  | 
  •  

Вопрос

У меня есть страница с float: right'Ed Div наверху, и text-align: center'Эд Диф прямо под ним. Можно ли сделать плавучий Div, а не изменять поток другого Div (тот, который прямо под ним)?

Вот два скрипки, которые показывают то, что я вижу (мне не нравится, ни то, ни другое, они объяснены в следующем абзаце):
вне центра -> http://jsfiddle.net/5xmvt/
центрированное, но зияющее отверстие -> http://jsfiddle.net/csgqn/

Если оставить в покое, нижний див выталкивается влево (из центра) от плавающего Div. я мог бы сделать clear: both На нижней части Div, но это оттолкнет его ниже плавающего Div, и, хотя это лучше, чем быть вне центра, это неоптимально, потому что он создает гигантскую дыру прямо над ним. Мне нужно вообще не изменять поток DIV под ним, как будто его там даже нет.

Я также думал о том, чтобы сделать position: absolute; но это сработало бы только в том случае, если бы Div должен был быть на оставил сторона, когда он должен быть на правой стороне.

То, что я хотел бы, это как первая скрипка, за исключением того, что «должен быть центрированный» текст, фактически центрированный.

Это было полезно?

Решение

Вы можете установить правый диапазон Div с позицией: абсолют

И установите право: 0, это даст ему то же поведение, что и плавание вправо.

Обратите внимание, что это будет работать только в том случае, если DIV должен быть в правой части страницы, а не контейнер.

Другие советы

Я думаю, ты можешь сделать это таким образом http://jsfiddle.net/5xmvt/4/

Или вы можете использовать позицию Absolute для. Площающего класса и установить право: 0px

Да, почему бы не иметь что -то подобное:

<div id="container">
  <div id="rightFloat"> you right floated here</div>
  <div id="content"> your text here</div>
</div>

С следующим стилем:

  #container {

  } 
  #rightFloat {
    float: right;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-right: 10px;    
  }
  #content {
    border: 1px solid black;
    float: right;
    clear: none;
    margin-right: 10px;
  }

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top