Как позиционировать это, используя только CSS и без таблиц - PullRequest
Новая
       15

Как позиционировать это, используя только CSS и без таблиц

0 голосов
/ 04 августа 2010

Я хочу расположить этот фрагмент HTML 

<div id="D1">
  <div id="D1.1">HeaderText</div>
  <div id="D1.2"> From
    <input id="from" name="from" value=""/>
  </div>
  <div id="D1.3"> To
    <input id="To" name="To" value=""/>
  </div>
</div>

таким образом 

+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
||                                  ||    +-(from)-------+||  +-(to)---------+||
|| HeaderText                       ||From|              |||To|              |||
||                                  ||    +--------------+||  +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+

, используя CSS

Вещи, которые мне нужны:

  • D1.1 должен быть выровнен по левому краю, а D1.2 и D1.3 должны занимать только необходимое им пространство и должны быть выровнены по правому краю.
  • Даже если я здесь представил ширину D1.1, чтобы взять всеоставшееся горизонтальное пространство, это не требуется.
  • D1 должен расти вертикально, чтобы полностью содержать D1.1, D1.2, D1.3.(Без переполнения, все div полностью видны)
  • Дизайн должен быть плавным (т. Е. Если я изменю размеры шрифта текста внутри div, компоновка будет изменена соответствующим образом.

Можно ли сделать все это, используя только CSS и без таблиц? Как?

Ответы [ 3 ]

3 голосов
/ 04 августа 2010

Yanko,

Ваши имена ID имеют точки в них, и это будет проблемой в CSS, так как точка зарезервирована.Лучше всего не использовать зарезервированные символы в именах, но если они у вас должны быть, вы должны избегать точек с обратной косой чертой.Разметка может оставаться как есть.

Вот CSS: 

#D1 {
  background-color: gold;
  padding: 10px;
  overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
   float: left;
   padding: 10px; 
}

Если вам нужна помощь в понимании свойства переполнения, вот учебник , в котором это обсуждается.

===

1 голос
/ 04 августа 2010

Layout Gala - довольно хороший справочник для макетов на основе CSS.

Возможно, вы захотите взглянуть на этот макет или, возможно, этот макет , поскольку они оба выглядят примерно так, как вы просите.

Удачи, и надеюсь, что это поможет некоторым.

0 голосов
/ 06 августа 2010 
#D1 {
  background-color: gold;
  padding: 10px;
  overflow: auto;
}
#D1\.1  {
   float: left;
   padding: 10px; 
}

#D1\.2 , #D1\.3 {
   float: right;
   padding: 10px; 
}

</style>

</head>
<body>


<div id="D1">
  <div id="D1.1">HeaderText</div>

  <div id="D1.3"> To
    <input id="To" name="To" value=""/>
  </div>
    <div id="D1.2"> From
    <input id="from" name="from" value=""/>
  </div>
</div>

</body>
</html>
...