问题
I am not quite sure how to say what I want but I am going to try. I want to vertically align three different elements, all three wrapped in individual divs. Currently this is my code:
.service_info {
margin-top: 45px;
clear: both;
background-color: #ffffff;
font-family: "source-sans-pro", sans-serif;
}
.title_text_serviceinfo {
margin-top: 85px;
margin-left: 60px;
padding-bottom: 20px;
color: #333132;
font-size: 24px;
font-family: "source-sans-pro", sans-serif;
}
.service_info_times {
margin-top: -110px;
margin-left: 200px;
font-size: 18px;
line-height: 175%;
border-left: 5px solid #0b496f;
padding-left: 20px;
color: #333132;
}
.service_info_events {
postion: fixed;
left: 300px;
top: 20px;
font-size: 18px;
line-height: 175%;
color: #333132;
}
<!--Service Information-->
<section class="service_info">
<h2 class="secondary_header"> When We Gather </h2>
<h3 class="title_text_serviceinfo"> Sunday </h3>
<div class="service_info_times">
<ul>
<li>7:00am</li>
<li>8:30am</li>
<li>9:00am</li>
<li>10:15am</li>
<li>4:00pm</li>
</ul>
</div>
<div class="service_info_events">
<ul>
<li>Men's Prayer</li>
<li>Fellowship Time</li>
<li>Sunday School</li>
<li>Worship Service</li>
<li>Revolution Student Ministries</li>
</ul>
</div>
<h3 class="title_text_serviceinfo"> Monday </h3>
<div class="service_info_times">
<ul>
<li>6:00pm</li>
</ul>
</div>
<div class="service_info_events">
<ul>
<li>Precept Bible Study</li>
</ul>
</div>
<h3 class="title_text_serviceinfo"> Tuesday </h3>
<div class="service_info_times">
<ul>
<li>9:15am</li>
</ul>
</div>
<div class="service_info_events">
<ul>
<li>P.E.A.R.L.S. (Lady's Ministry</li>
</ul>
</div>
<h3 class="title_text_serviceinfo"> Wednesday </h3>
<div class="service_info_times">
<ul>
<li>7:00am</li>
<li>7:00pm</li>
<li>7:00pm</li>
<li>7:00pm</li>
</ul>
</div>
<div class="service_info_events">
<ul>
<li>Stronger Senior</li>
<li>CLC</li>
<li>Club 56</li>
<li>House of Prayer</li>
</ul>
</div>
</section>
Feel free to help me correct any other errors...I just started learning how to code a website.
Here is an image of what I want the final product to be: (I have to link to it since I am new to this site.)
fujifame.com/art260/
回答1:
Edit: @GCyrillus Has a codepen that's even cleaner: http://codepen.io/gc-nomade/pen/raovxv
I managed to somewhat hack your code into submission. I hope this helps you out but your code really needs to be rewritten. Based on the image you have, you should have 2 columns of divs. The day of the week should be in the first column div and the events should be in the second. Add the css property foat:left;
to your second column divs, and clear them using the CSS property clear:
if they arent moving down to the next column. Hope this gives you a head start! Here you go.
.header{ clear:both; }
.service_info {
margin-top: 45px;
background-color: #ffffff;
font-family: "source-sans-pro", sans-serif;
}
.title_text_serviceinfo {
margin-top: 100px;
margin-left: 60px;
/*padding-bottom: 20px;*/
color: #333132;
font-size: 24px;
font-family: "source-sans-pro", sans-serif;
float:left;
clear:left;
width:140px;
}
.service_info_times {
margin-top: 20px;
/*margin-left: 200px;*/
font-size: 18px;
line-height: 175%;
border-left: 5px solid #0b496f;
padding-left: 20px;
color: #333132;
float:left;
clear:right;
}
.service_info_events {
font-size: 18px;
line-height: 175%;
color: #333132;
clear:right;
}
.secondMargin{ margin-top:40px; }
.thirdMargin{ margin-top:80px; }
<section class="service_info">
<div id = "header">
<h2 class="secondary_header"> When We Gather </h2>
</div>
<h3 class="title_text_serviceinfo"> Sunday </h3>
<div class="service_info_times">
<ul>
<li>7:00am Men's Prayer</li>
<li>8:30am Fellowship Time</li>
<li>9:00am Sunday School</li>
<li>10:15am Worship Service</li>
<li>4:00pm Revolution Student Ministries</li>
</ul>
</div>
<h3 class="title_text_serviceinfo secondMargin"> Monday </h3>
<div class="service_info_times">
<ul>
<li>6:00pm Precept Bible Study</li>
</ul>
</div>
<h3 class="title_text_serviceinfo secondMargin"> Tuesday </h3>
<div class="service_info_times">
<ul>
<li>9:15am P.E.A.R.L.S. (Lady's Ministry)</li>
</ul>
</div>
<h3 class="title_text_serviceinfo"> Wednesday </h3>
<div class="service_info_times">
<ul>
<li>7:00am Stronger Senior</li>
<li>7:00pm CLC</li>
<li>7:00pm Club 56</li>
<li>7:00pm House of Prayer</li>
</ul>
</div>
</section>
来源:https://stackoverflow.com/questions/29177759/how-to-vertically-align-justify-multiple-elements