CSS свойство "inline" не дает мне новую строку на веб-странице - PullRequest
Новая
       8

CSS свойство "inline" не дает мне новую строку на веб-странице

0 голосов
/ 25 июня 2011

В .manager-record-header и .manager-record Я добавил свойство display: block;, я ожидаю, что оно создаст новую строку для каждого <div> Я набираю как manager-record-header или manager-record. Почему-то это не работает - элементы 01 и 02 отображаются в одной строке. Где может быть проблема?

это моя веб-страница: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <style type="text/css">
h1 {
    font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
    color: #333;
  font-size: 1.5em; color: #6297BC;
}
h1 {  } 

body {
    margin: 0;
    padding: 0;
    font: 11px/1.6em  Verdana, Tahoma, Helvetica, sans-serif;
    color: #666666; 
    background: #A9BAC3;
    text-align: center;
}

#manager-body {
    background: #FFF;
    width: 820px;
    margin: 0 auto; 
    text-align: left;
}

.manager-record-header  {
  font-size: 2em;
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-header-name {
  padding-left: 5px;
  width: 350px;
  float:left;
}

.manager-record-header-quantity {
  width: 100px;
  float:left;
}

.manager-record  {
  padding-left: 15px;
  display: block;
  width: 100%;
}

.manager-record-title {
  float:left;
  padding-left: 5px;
  width: 350px;
}

.manager-record-quantity {
  float: left;
  width: 100px;
}

</style>
 </head>
<body>
<div id="manager-body">
<h1>Item pricing</h1>

    <div class="manager-record-header">
      <span class="manager-record-header-name">Item name</span>
      <span class="manager-record-header-quantity">Quantity</span>
      <span class="manager-record-quantity">Price</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 01</span>
      <span class="manager-record-quantity">10</span>
    </div>
    <div class="manager-record">
      <span class="manager-record-title">Item 02</span>
      <span class="manager-record-quantity">3</span>
    </div>
</div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 25 июня 2011

Как сказал @Nico, проблема заключается в перемещении содержимого элементов div, что означает, что элементы div не содержат наглядно промежутки.

Легко исправить, добавив overflow:hidden к .manager-record-header и .manager-record.

Но я согласен с @Jason Gennaro. Для меня это выглядит как табличные данные.

1 голос
/ 25 июня 2011

Вот скрипка вашей проблемы.

http://jsfiddle.net/jasongennaro/YQQHc/

Это похоже на данные, которые лучше всего представить в table. Я говорю: забудь div и используй таблицу.

EDIT

как то так 

<table>
    <thead>
        <td>Item name</td>
        <td>Quantity</td>
        <td>Price</td>            
    </thead>
    <tr>
        <td>Item 01</td>
        <td>10</td>
        <td>?</td>
    </tr>
    <tr>
      <td>Item 02</td>
      <td>3</td>
      <td>?</td>
    </tr>        
</table>

http://jsfiddle.net/jasongennaro/YQQHc/1/

...