تنسيق النص، اقتراحات مع كيف؟
https://stackoverflow.com/questions/570893
-
05-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أحاول معرفة كيفية تهيئة التعليمات البرمجية أدناه بحيث يتم عرض أول كتلتين من المعلومات جنبا إلى جنب، ثم قم بعرض المرحلة الثالثة التي تركزت تحكيمها تحتها. حاولت استخدام نمط الإدراج مع 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>
المحلول
يمكنك إنشاء ثلاثة div's.
- سيكون الدف الأول (أعلى اليسار) مجموعة عرض في، على سبيل المثال، 50٪ من الحاوية (مثل Viewport) و تعويم: اليسار.
- سيكون الدف الثاني (أعلى اليمين) عرض عرض، على سبيل المثال، 50٪ من الحاوية (مثل Viewport) و تعويم الحق.
- سيقول الدف الثالث (أسفل الوسط) مجموعة WITDH، على سبيل المثال، 100٪ من الحاوية (مثل Viewport) استخدم CSS واضح: كلاهما لوضع نفسه مباشرة أسفل أطول العلاطومين. للمركز، استخدم عرض أصغر (على سبيل المثال 50٪ أو 20EM) وقم بتعيين هامش CSS الأيسر والهامش الحق في تلقائي (انظر المثال أدناه)
سيقوم أعلاه بتعبئة Divs الثلاثة ديناميكيا لاستيعاب أي التفاف والتنامي العمودي (بما في ذلك بسبب زيادة حجم الخط من قبل المستخدم لأغراض إمكانية الوصول) داخل أي من الحف الثلاثة.
<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>
نصائح أخرى
للمتعة فقط، هنا هو التخطيط الذي تريده باستخدام القوائم.
<!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>
لن أسمم هذا مع قائمة، فقط استخدم Divs.
<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>
<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>
لا تنتمي إلى StackOverflow
