Поменяйте местами DIV по горизонтали, когда float не работает должным образом (с использованием CSS)

Question 1

<td width="100%">
  <h1 class="*"></h1>
  <div class="DIV ONE"></div>
  <div class="DIV TWO"></div>

Проблема немного сложнее, чем следует из названия. Я хочу добиться того, чтобы «DIV TWO» помещался в одну строку с «DIV ONE» (что можно сделать с помощью {display: inline;} или {display: table-footer / header-group;} ), но поменять местами свои заказы (поставьте "DIV TWO" перед "DIV ONE"). Вот где я застрял, так как {float: right;} в «DIV ONE» помещает его полностью вправо страницы, а {margin-right} ничего не делает.

Я хочу, чтобы они были близко друг к другу и выровнены по левому краю, например:

___________________________________________________________________________ |td | |---------------------------------------------------------------------------| | h1 | | ---------------------------------------------------------------------- | | _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ | | | | | | | | DIV TWO | DIV ONE | | | |_ _ _ _ _ _ _ _ | _ _ _ _ _ _ _ | | |___________________________________________________________________________|

Как лучше всего добиться этого с помощью CSS?

css

0

Bodi 3 Мар 2015 в 14:39

Answer

Добавить позицию: относительно их родительского класса, а затем

.ONE {
  position: absolute;
  top: 100px;
  left: 300px; //change this to width of div two 
}

.TWO {
  position: absolute;
  top: 100px;
  left: 0px; 
}

0

naman kalkhuria 3 Мар 2015 в 11:48

Answer

Мне нравится, как это делает twitter-bootstrap, поэтому ответ основан на нем :)

.left, .right {
    float: left;
    position: relative;
}

.left {
    left: 25%;    
    width: 75%;    
}

.right {
    right: 75%;    
    width: 25%;    
}

<div class="left">Left element</div>
<div class="right">Right element</div>

Примере

1

John Slegers 12 Фев 2016 в 11:24

Answer

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

table {width:100%;}
td {
  direction: rtl;
  text-align: left;
}
.DIV {
  display: inline-block;
}

<table>
  <tr>
    <td>
      <div class="DIV ONE">one</div>
      <div class="DIV TWO">two</div>
    </td>
  </tr>
</table>

Подробнее о направлении

В противном случае вы могли бы использовать метод float everything

.container,
.TWO {float:left;}
.ONE {float:right;}

<div class="container">
    <div class="DIV ONE">one</div>
    <div class="DIV TWO">two</div>
</div>

1

Pete 3 Мар 2015 в 14:17

Question 2