让div直接在CSS中

我的编辑器刚刚崩溃并删除了我所做的所有工作。我试图找到一个解决方案，使3 div看起来干净，以div为中心，但没有浮动。我之前就知道了，但我想这只是一种幸运。让div直接在CSS中

现在，1st div太低，2nd div居中，3rd div太低;我只想让它横向居中并位于页面内。

* { 
 
    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>

来源

2017-10-16 tkss44

什么'div's'到底在说什么？ – Krusader

http://jsbin.com/colufidezi/edit?html,css,output这是你的问题jsbin。请随时提供，这样人们可以更快地帮助你。 – GONG

我正在讨论div“midframe”中的部分 – tkss44

您可以在主DIV，然后使用Flex display:flex;与孩子部分的宽度。

事情是这样的：https://jsfiddle.net/ef60wbmg/

HTML：

<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>

CSS：

#midframe { 
    display:flex; 
} 
section { 
    flex: 0 0 33.33333%; 
    max-width: 33.33333%; 
}

来源

2017-10-16 13:12:38

让div直接在CSS中

回答

相关问题