CSS2 DIV Presentation Issue

Мне нужно создать страницу с котировками бок о бок для большого количества строк. Я ищу чистую презентацию CSS2, где кавычки каждой строки выстраиваются вертикально и не запускаются ниже друг друга. Также я ищу решение с наименьшим количеством кода и, желательно, тот, который не плавает DIV и не использует атрибут отображения.CSS2 DIV Presentation Issue

Re: код ниже, мое мышление состоит в том, чтобы содержать каждую цитату в своем собственном DIV (в надежде, что кавычки из одной строки отображаются бок о бок) и иметь DIV одной строки, содержащиеся родителем DIV (в надежде, что кавычки в следующей строке выстроят вертикально). отбросьте код отдельно. Начните новое. Все, что вам нужно, чтобы сообщить мне, где я ошибаюсь.

<html> 
<head> 
<style type="text/css"> 

    body 

    { 
     font-family:Verdana; 
     font-size:11px; 
    } 

    div#mainContainer 

    { 
     width:570px; 
    } 


    div#mainContainer div.subContainer 
    { 
     margin:30px; 
    } 

    div#mainContainer div.subContainer div 
    { 
     vertical-align:top; 
     width:285px; 
    } 

    div#mainContainer div.subContainer div.contentLeft 
    { 
     float:left; 
     margin-right:45px; 
    } 

    div#mainContainer div.subContainer div.contentRight 
    { 
     display:inline; 
    } 

</style> 
</head> 
<body> 
<div id="mainContainer"> 
    <h1>Title</h1> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut." 
      <p>Bill, New York</p> 
     </div> 
     <div class="contentRight"> 
      "Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." 
      <p>Fred, Detroit</p> 
     </div> 
    </div> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint." 
      <p>Sarah, Seattle</p> 
     </div> 
     <div class="contentRight"> 
      "Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut." 
      <p>Phil, Austin</p> 
     </div> 
    </div> 
    <div class="subContainer"> 
     <div class="contentLeft"> 
      "Labore et dolore magna aliqua. Ut enim ad." 
      <p>Jon, Petrolia</p> 
     </div> 
     <div class="contentRight"> 
      "Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia." 
      <p>Chris, Burlington</p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2009-05-07 Anonymous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Title</title> 
<style type="text/css"> 

    body { 
     font-family:Verdana; 
     font-size:11px; 
    } 

    #mainContainer { 
     width: 600px; 
    } 

    .quoteBox { 
     width: 300px; /* Half the width of the mainContainer to ensure there is always space to exactly TWO quotes on each row */ 
     float: left; 
    } 

    .clearer { 
     height: 0; 
     font-size: 0; 
     clear: both; /* Clear the line to ensure no quotes end up partly below another one. Follow the pattern: Two quotes, clear, two quotes, clear etc... */ 
    } 

    blockquote,cite { margin: 12px } 

</style> 
</head> 
<body> 
<div id="mainContainer"> 
    <h1>Title</h1> 
     <div class="quoteBox"> 
      <blockquote>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote> 
      <cite>Bill, New York</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." </blockquote> 
      <cite>Fred, Detroit</cite> 
     </div> 

     <div class="clearer">&nbsp;</div> 

     <div class="quoteBox"> 
      <blockquote>"Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint."</blockquote> 
      <cite>Sarah, Seattle</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote> 
      <cite>Phil, Austin</cite> 
     </div> 

     <div class="clearer">&nbsp;</div> 

     <div class="quoteBox"> 
      <blockquote>"Labore et dolore magna aliqua. Ut enim ad."</blockquote> 
      <cite>Jon, Petrolia</cite> 
     </div> 

     <div class="quoteBox"> 
      <blockquote>"Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."</blockquote> 
      <cite>Chris, Burlington</cite> 
     </div> 

</div> 
</body> 
</html>

Как это, к примеру? Несколько уменьшилось количество избыточных элементов DIV, а также немного очистили CSS. Выглядит чище и должно работать так, как вы описали свою проблему.

blockquote и cite-elements, используемые для добавления смысловых значений в документ.

источник

2009-05-07 20:14:47

, не отклоняясь много от ваших оригинальных элементов (хотя предположение, что вы добавляете смысловое значение для внутренних элементов хорошо), я получил успех, заменить элемент с этим:

body 
{ 
    font-family: Verdana; 
    font-size: 11px; 
} 

div#mainContainer 
{ 
    width: 645px; 
} 

div.subContainer 
{ 
    margin: 30px; 
} 

div.subContainer div 
{ 
    vertical-align: top; 
    float: left; 
    width: 285px; 
} 

div.contentLeft 
{ 
    margin-right: 45px; 
}

Обратите внимание, что ваши расчеты по ширине были слишком низкими. Я тестировал это с IE8, а не с FF, но он должен работать. Если вы используете IE8, в него встроена новая очень мощная панель инструментов разработчика, которая включает в себя панель «Макет», которая показывает эффективные значения смещения, поля, границы и запаса со всех сторон элемента.

источник

2009-05-08 07:34:12

CSS2 DIV Presentation Issue

ответ

Смежные вопросы