Форматирование текста, предложения с практическими рекомендациями? - PullRequest
Новая
       10

Форматирование текста, предложения с практическими рекомендациями?

0 голосов
/ 20 февраля 2009

Я пытаюсь выяснить, как отформатировать приведенный ниже код, чтобы первые два блока информации отображались рядом, а затем отображал третий, центрированный под ним. Я попытался использовать стиль листинга с помощью css для его форматирования, но, похоже, он мне не подходит.

Помощь / Предложения? 

<div class="inauguration-content">
<h3>Inauguration</h3>
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center</p>

<h3>Inaugural Gala</h3>
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation</p>

<h3>Important Information for Delegates</h3>
<a href="http://www.herkimer.edu/admissions/directions/" target="_blank">Direction to HCCC</a><br />
<a href="http://www.herkimer.edu/pdfs/campusmap.pdf" target="_blank">Campus Map</a><br />
<a href="http://www.herkimer.edu/admissions/hotels/" target="_blank">Lodging Information</a><br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.</p>
</div>

Ответы [ 4 ]

2 голосов
/ 20 февраля 2009

Вы можете создать три div.

  1. Первый div (верхний левый) будет иметь ширину, скажем, 50% контейнера (например, viewport) и float left .
  2. Второй div (вверху справа) будет иметь ширину, скажем, 50% контейнера (например, viewport) и float right .
  3. Третий div (в центре снизу) будет иметь ширину, скажем, в 100% контейнера (например, область просмотра) использовать CSS 'clear: both' , чтобы расположиться непосредственно под самым высоким из двух поплавков. Для центрирования используйте меньшую ширину (например, 50% или 20 мкм) и установите для CSS поля margin-left и margin-right значение auto (см. Пример ниже.)

Вышеприведенное будет динамически упаковывать три элемента div для размещения любого переноса и вертикального увеличения (в том числе из-за увеличения размера шрифта пользователем в целях доступности) внутри любого из трех элементов div. 

<html><body>

<div style="width:50%; float:left">
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center
</div>

<div style="width:50%; float:right">
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation
</div>

<div style="width:50%; margin-left:auto; margin-right:auto; clear:both">
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the 

Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.
</div>

</body></html>
1 голос
/ 23 февраля 2009

Просто для удовольствия, вот макет, который вы хотели использовать с помощью списков. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>container Title</title>
        <style type="text/css" media="screen">
            body {
                font-family:Georgia;
            }
            #container { 
                width:700px;
                margin:0 auto;
            }
            ul {
                display:block;
                margin:0;
                padding:0px;
                width:50%;
                float:left;
            }
            ul.full { 
                margin:0 auto; 
                float:none; 
                clear:both;
                padding-top:5px;
            }
            ul li {
                list-style-type:none;
                margin:0;
                padding:0;
                padding-left:10px;
             }
        </style>
    </head>
    <body>
        <div id="container">

        <ul>
            <li><h4>Inauguration</h4></li>
            <li>Friday, April 17, 2009</li>
            <li>3:00 p.m.</li>
            <li>Sarkus-Busch Theater</li>
            <li>Robert McLaughlin College Center</li
        ></ul>
        <ul>
            <li><h4>Inaugural Gala</h4></li>
            <li>7-11 p.m.</li>
            <li>Robert McLaughlin College Center</li>
            <li>Featuring hors d'oeuvres, open bar and dinner and dessert stations</li>
            <li>Entertainment by Frankie Michaels</li>
            <li>Cocktail Attire Recommended</li>
            <li>Tickets are $100 per person</li>
            <li>Proceeds benefit the Herkimer County College Foundation</li>
        </ul>
        <ul class="full">
            <li><h4>Important Information for Delegates</h4></li>
            <li>Direction to HCCC</li>
            <li>Campus Map</li>
            <li>Lodging Information</li>
            <li>Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.</li>
            <li>Delegates are expected to furnish their own academic regalia. </li>
        </ul>
        </div>
    </body>
</html>
0 голосов
/ 20 февраля 2009 
<div style="width:49%; float:left"><p>
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center</p>
</div>

<div style="width:49%; float:left"><p>
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation</p>
</div>

<div style="width:50%;margin:auto "><p>
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should 
report to the Open Student Area, first floor of the 
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.</p>
</div>
0 голосов
/ 20 февраля 2009

Я бы не использовал этот стиль в списке, просто используйте div. 

<style type="text/css">
    .left { float:left; }
    .right { float:right; }

    .half { width:50%; }
    .centered { text-align:center; }


    // from http://www.webtoolkit.info/css-clearfix.html
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }

    * html .clearfix {
        height: 1%;
    }
</style>

<div class="clearfix">
    <div style="left half">
    <strong>Inauguration</strong><br />
    Friday, April 17, 2009<br />
    3:00 p.m.<br />
    Sarkus-Busch Theater<br />
    Robert McLaughlin College Center<br />
    </div>

    <div style="right half">
    <strong>Inaugural Gala</strong><br />
    7-11 p.m.<br />
    Robert McLaughlin College Center<br />
    Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
    Entertainment by Frankie Michaels<br />
    Cocktail Attire Recommended<br />
    Tickets are $100 per person<br />
    Proceeds benefit the Herkimer County College Foundation<br />
    </div>
</div>
<div class="centered">
    <strong>Important Information for Delegates</strong><br />
    Direction to HCCC<br />
    Campus Map<br />
    Lodging Information<br />
    Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
    Delegates are expected to furnish their own academic regalia.<br />
</div>
...