0
Mein Editor ist gerade abgestürzt und löschte alle meine Arbeit, die ich getan habe. Ich versuche eine Lösung zu finden, die das Aussehen von 3 Divs innerhalb eines div-zentrierten, aber nicht schwebenden Looks sauber macht. Ich habe es schon einmal bekommen, aber ich denke, es war nur ein Glücksfall.Halten divs gerade in CSS
Jetzt ist die 1. div zu niedrig, die 2. div ist zentriert, und die 3. div ist zu niedrig; Ich möchte es nur horizontal zentriert und innerhalb der Seite erhalten.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
text-align: center;
font-family: 'abel';
font-size: 100%;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
#title {
background-color: black;
color: white;
padding: 2em;
font-size: 2em;
}
#address {
background-color: #ff9595;
color: white;
padding: 1em;
}
nav {
background-color: #ffa327;
color: white;
padding: 1em;
}
nav ul {
list-style-type: none;
}
#midframe {
padding: 1em;
width: 100%;
text-align: center;
display: inline-block;
}
#packages {
border: 1px solid red;
width: 25em;
font-size: 1em;
padding: 1em;
display: inline-block;
}
#package1 {
float: left;
padding: .5em;
margin: .24804em;
}
#midframe section img {
display: inline-block;
margin: 1em;
}
#reprints {
border: 1px solid red;
width: 25em;
display: inline-block;
padding: 1em;
clear: both;
}
#colorreprint {
border: px solid red;
float: left
}
#blackwhiterp {
border: px solid red;
float: right;
}
#footer {
background-color: black;
color: white;
padding: 2em;
margin-top: 5em;
clear: both;
}
@media screen and (min-width:1000px) {
#midframe {
text-align: center;
width: 100%;
display: inline-block;
}
#midframe section {
display: inline-block;
}
}<h1 id=title><span id=hpdesign>HP</span> <span id=photographydesign>Photography</span></h1>
<h2 id=address>
<p>7235-3 Franklin Blvd</p>
<p>Sacramento, Ca 95823</p>
<p>(916)424-5968</p>
</h2>
<nav>
<ul>
<span><li>Hours of Operation
</li>
<li>Mon-Sat 11AM - 7PM</li>
<li>Sunday 11AM - 6PM</li></span>
<span><li>Services</li>
<li>Portraits</li>
<li>Weddings</li>
<li>Graduations</li>
<li>Family</li>
<li>Commercials</li>
<li>Passports</li>
<li>Publicity</li>
<li>Custom Printing</li>
<li>Enlargements</li>
<li>Texture</li>
<li>Mounting</li>
</span>
</ul>
</nav>
<div id='midframe'>
<section id='packages'><b><p>Standard Package Deals</p></b>
<div id=package1>
<b><th>Package 1</th></b><br/>
<tr>$18.99</tr><br/>
<tr>1-8x10</tr><br/>
<tr>1-5x7</tr><br/>
<tr>8-wallets</tr>
</div>
<div id=package1><b><th>Package 2</th></b>
<br/>
<tr>$22.99</tr><br/>
<tr>2-8x10</tr><br/>
<tr>4-5x7</tr><br/>
<tr>12-wallets</tr>
</div>
<div id=package1>
<b><th>Package 3</th></b><br/>
<tr>$32.99</tr><br/>
<tr>3-8x10</tr><br/>
<tr>6-5x7</tr><br/>
<tr>24-wallets</tr>
</div>
<div id=package1>
<b><th>Package 4</th></b><br/>
<tr>$50.99</tr><br/>
<tr>4-8x10</tr><br/>
<tr>8-5x7</tr><br/>
<tr>40-wallets</tr>
</div>
<b><p>Black & White, Brown Tone Packages</p></b>
<div id=package1>
<b><th>Package 1</th></b><br/>
<tr>$22.99</tr><br/>
<tr>1-8x10</tr><br/>
<tr>1-5x7</tr><br/>
<tr>8-wallets</tr>
</div>
<div id=package1>
<b><th>Package 2</th></b><br/>
<tr>$30.99</tr><br/>
<tr>2-8x10</tr><br/>
<tr>4-5x7</tr><br/>
<tr>12-wallets</tr>
</div>
<div id=package1>
<b><th>Package 3</th></b><br/>
<tr>$39.99</tr><br/>
<tr>3-8x10</tr><br/>
<tr>6-5x7</tr><br/>
<tr>12-wallets</tr>
</div>
<div id=package1>
<b><th>Package 4</th></b><br/>
<tr>$56.99</tr><br/>
<tr>4-8x10</tr><br/>
<tr>8-5x7</tr><br/>
<tr>40-wallets</tr>
</div>
</section>
<section><img src="images/hp.jpg" width=500px></section>
<section>
<div id='reprints'><b><p>Reprint Options</p></b>
<div id=colorreprint><strong><th>Color</th></strong>
<br/>
<tr>2- Wallets $1.00</tr><br/>
<tr>10- Wallets $4.99</tr><br/>
<tr>20- Wallets $7.99</tr><br/>
<tr>30- Wallets $9.99</tr><br/>
<tr>60- Wallets $14.99</tr><br/>
<tr>3X5- $1.00</tr><br/>
<tr>4X6- $1.25</tr><br/>
<tr>5X7- $1.99</tr><br/>
<tr>6X8- $3.99</tr><br/>
<tr>8X10- $4.99</tr><br/>
<tr>8X12- $5.99</tr><br/>
</div>
<div id=blackwhiterp><strong><th>Black & White, Brown Tone</th><br/></strong>
<tr>2- Wallets $2.00</tr><br/>
<tr>10- Wallets $6.99</tr><br/>
<tr>20- Wallets $11.99</tr><br/>
<tr>30- Wallets $14.99</tr><br/>
<tr>60- Wallets $21.99</tr><br/>
<tr>3X5- $1.50</tr><br/>
<tr>4X6- $2.50</tr><br/>
<tr>5X7- $2.99</tr><br/>
<tr>8X10- $6.99</tr><br/>
<tr>8X12- $7.99</tr><br/>
</div>
</div>
</section>
</div>
Was 'div's' genau reden Sie? – Krusader
http://jsbin.com/colufidezi/edit?html,css,output Hier ist Jsbin auf Ihre Frage. Bitte stellen Sie es immer bereit, damit die Leute Ihnen schneller helfen können. – GONG
Ich spreche über die Abschnitte in der div "Midframe" – tkss44