Question

我的编辑器崩溃并删除了我所做的所有工作。我试图找到一个解决方案，让3个div看起来很干净，但不会浮动。我之前得到了它，但我想这只是运气。

现在，第一个div太低，第二个div居中，第三个div太低;我只是想让它水平居中并在页面内。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以在主div中使用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%;
}

在CSS中保持div直接

1 个答案: