Question

所以我正在处理我的简单项目，我希望水平对齐我的块以适应屏幕，我该如何在CSS或HTML中执行此操作？

我的jsp代码：我怎样才能让它们合适？非常感谢，我尝试过，但我不想删除我的边界

我已尝试过上一篇文章中的一些建议答案，但他们不断改变我的边界

＆＃13;

html,
body,
div,
h1,
li {
  border: 12px;
  margin: 12px;
  padding: 0px;
  font-size: 100%;
}

body {
  margin-left: 0px;
  padding: 0px;
  background-color: #ecf9fe;
  max-width: 300px;
  position: relative;
}

#main {
  margin-left: 20px;
  margin-top: 1em;
}

h1 {
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #000000;
  max-width: 200%;
  text-align: left;
}

.content {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #0080ff;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content1 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #00ff00;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content2 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #ff8000;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.shadow {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Firefox 3.5 - 3.6 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  max-width: 100%;
}

.information {
  font-family: Open Sans Condensed, sans-serif;
  line-height: 25px;
  font-size: 18px;
  font-weight: 300;
  max-width: 100%;
}

p {
  font-family: Roboto Slab, sans-serif;
  font-size: 14px;
}

＆＃13;

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link type="text/css" rel="stylesheet" href="HotelMenuItem.css">
    <title>My Restaurant</title>
  </head>

  <body id="main" class="gradient">

    <h1 class="title shadow">MAMA RESTAURANT</h1>

    <div class="content shadow">
      <div>

        <p>Menu Item</p>
        <ul class="listing">
          <li>Appetizer</li>
          <li>Salad</li>
          <li>Mushroom</li>
          <li>pizaa</li>
          <li>Mozerello</li>
          <li>Rice</li>
        </ul>
      </div>
    </div>


    <div class="content1 shadow">
      <div></div>
      <div>
        <p>Restaurant Items</p>
        <ul class="listing">

          <li> Diet Coke </li>
          <li> Heineken </li>
          <li>Jack Daniels</li>
          <li>Mango</li>

        </ul>

      </div>
    </div>
    </div>
    <div class="content2 shadow">
      <p>Favorite</p>
      <ul class="listing">

        <li> Food </li>
        <li> Food </li>
        <li>Food </li>
        <li>Food</li>

      </ul>

    </div>


  </body>

  </html>

＆＃13;

Answer 1

使用flex-box的可能解决方案。我将3列放入内容包装器中。

.content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

同时从正文中移除宽度并添加到列中。

以下是完整代码：jsfiddle

Answer 2

也许这就是你要找的东西。我将你的“盒子”包装在一个带有center-wrapper类的div中，并为该类添加了以下CSS：

.center-wrapper{
  margin: 0 auto;
  display: table;
}

我还删除了max-width body及其边距。如果我正确理解你的问题，请告诉我。您的代码在下面编辑。

html,
body,
div,
h1,
li {
  border: 12px;
  margin: 12px;
  padding: 0px;
  font-size: 100%;
}

body {
  margin-left: 0px;
  padding: 0px;
  background-color: #ecf9fe;
  position: relative;
}

#main {
  margin-top: 1em;
  width: 100%;
}

h1 {
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #000000;
  max-width: 200%;
  text-align: left;
}

.center-wrapper {
  margin: 0 auto;
  display: table;
}

.content {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #0080ff;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content1 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #00ff00;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content2 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #ff8000;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.shadow {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Firefox 3.5 - 3.6 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  max-width: 100%;
}

.information {
  font-family: Open Sans Condensed, sans-serif;
  line-height: 25px;
  font-size: 18px;
  font-weight: 300;
  max-width: 100%;
}

p {
  font-family: Roboto Slab, sans-serif;
  font-size: 14px;
}

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link type="text/css" rel="stylesheet" href="HotelMenuItem.css">
    <title>My Restaurant</title>
  </head>

  <body id="main" class="gradient">
    <div class="center-wrapper">
      <h1 class="title shadow">MAMA RESTAURANT</h1>

      <div class="content shadow">
        <div>

          <p>Menu Item</p>
          <ul class="listing">
            <li>Appetizer</li>
            <li>Salad</li>
            <li>Mushroom</li>
            <li>pizaa</li>
            <li>Mozerello</li>
            <li>Rice</li>
          </ul>
        </div>
      </div>


      <div class="content1 shadow">
        <div></div>
        <div>
          <p>Restaurant Items</p>
          <ul class="listing">

            <li> Diet Coke </li>
            <li> Heineken </li>
            <li>Jack Daniels</li>
            <li>Mango</li>

          </ul>

        </div>
      </div>
      <div class="content2 shadow">
        <p>Favorite</p>
        <ul class="listing">

          <li> Food </li>
          <li> Food </li>
          <li>Food </li>
          <li>Food</li>

        </ul>

      </div>
    </div>

  </body>

  </html>

Answer 3

这可能是你所期待的。如果没有，请在需要时再对该问题发表评论。

＆＃13;

html,
body,
div,
h1,
li {
  border: 12px;
  margin: 12px;
  padding: 0px;
  font-size: 100%;
}

body {
  margin-left: 0px;
  padding: 0px;
  background-color: #ecf9fe;
  position: relative;
}

#main {
  margin-left: 20px;
  margin-top: 1em;
}

h1 {
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #000000;
  max-width: 200%;
  text-align: left;
}

.content {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #0080ff;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content1 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #00ff00;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.content2 {
  float: center;
  display: block;
  overflow: hidden;
  background-color: #ff8000;
  padding: 30px;
  border: 7px solid #eaeaea;
  border-radius: 4px;
  max-width: 100%;
}

.shadow {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Firefox 3.5 - 3.6 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  max-width: 100%;
}

.information {
  font-family: Open Sans Condensed, sans-serif;
  line-height: 25px;
  font-size: 18px;
  font-weight: 300;
  max-width: 100%;
}

p {
  font-family: Roboto Slab, sans-serif;
  font-size: 14px;
}

.box {
  width: calc(33vw - 76px);
  display: inline-block;
  margin: 0;
  height: 200px;
}

.big-box {
  width: 100vw;
}

＆＃13;

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link type="text/css" rel="stylesheet" href="HotelMenuItem.css">
    <title>My Restaurant</title>
  </head>

  <body id="main" class="gradient">

    <h1 class="title shadow">MAMA RESTAURANT</h1>
    <div class="big-box">
      <div class="content shadow box">
        <div>
          <p>Menu Item</p>
          <ul class="listing">
            <li>Appetizer</li>
            <li>Salad</li>
            <li>Mushroom</li>
            <li>pizaa</li>
            <li>Mozerello</li>
            <li>Rice</li>
          </ul>
        </div>
      </div>

      <div class="content1 shadow box">
        <div></div>
        <div>
          <p>Restaurant Items</p>
          <ul class="listing">
            <li> Diet Coke </li>
            <li> Heineken </li>
            <li>Jack Daniels</li>
            <li>Mango</li>
          </ul>
        </div>
      </div>

      <div class="content2 shadow box">
        <p>Favorite</p>
        <ul class="listing">
          <li> Food </li>
          <li> Food </li>
          <li>Food </li>
          <li>Food</li>
        </ul>
      </div>
    </div>


  </body>

  </html>

＆＃13;

Answer 4

您需要在div中添加3 <div class="content shadow>。

<div class="boxes">
    <div class="content shadow">
    <div class="content1 shadow">
    <div class="content2 shadow">
</div>

之后，只需添加此css：

.boxes {
    display: inline-flex;
}

使用css

4 个答案: