<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

3 ответа

Лучший ответ

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

.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

Мне нравится, как это делает 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

Поскольку ваши 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