Question

我正在尝试将div左对齐，将其右对齐4 div。我不确定我是否应该在这里使用表格，但是我看不到表格如何正常工作。我应该使用绝对定位吗？

这是正在发生的事情的图像... 另外，请记住，将浏览器的缩放比例设置为75％，以捕获网站的整个高度和宽度。

<div class="head">
        <div class="head-title">
            <p>Pricing</p>
        </div>
        <div class="head-subtitle">
            <p>Incredibly low prices!</p>
        </div>
        <div class="head-body">
            <p>Just select the features you would like below to recieve an instant quote.</p>
            <hr>
            <div class="head-body-main">
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
            </div>
            <div class="head-body-responsive">
                <div id="responsive-image">
                    <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px">
                </div>
                <div id="responsive-content">
                    <h1>RESPONSIVE DESIGN</h1>
                    <p>The content on the site will automatically resize according to the device in use.</p>
                </div>
                <div id="responsive-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">

            <div class="head-body-ecommerce">
                <div id="ecommerce-image">
                    <img alt="eCommerce" src="images/features/ecommerce.png" width="175px" height="175px">
                </div>
                <div id="ecommerce-content">
                    <h1>WEB STORE</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="ecommerce-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">

            <div class="head-body-search">
                <div id="search-image">
                    <img alt="search" src="images/features/searchengineoptimization.png" width="175px" height="175px">
                </div>
                <div id="search-content">
                    <h1>SEO</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="search-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">

            <div class="head-body-more">
                <div id="more-image">
                    <img alt="more" src="images/features/extrafeatures.png" width="175px" height="175px">
                </div>
                <div id="more-content">
                    <h1>MORE FEATURES</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="more-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">
            <div class="clear"></div>
        </div>
    </div>


.head {
    background-color: rgba(193, 196, 195, .6);
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
}

.head-title {
    background-color: rgba(249, 58, 58, .7);
    text-align: center;
    border-radius: 5px;
    font-size: 35px;
    margin: 0 auto;
    width: 90%;
    color: white;
}

.head-subtitle {
    background-color: rgba(249, 58, 58, .7);
    text-align: center;
    border-radius: 10px;
    margin: 0 auto;
    width: 25%;
    color: white;
    font-size: 20px;
}

.head-body {
    font-size: 20px;
    padding: 15px 15px 15px 15px;
}

.head-body-main {
    width: 30%;
    height: auto;
    float: left;
    border-right: 1px solid red;
    position: relative;
}

.clear {
    clear: both;
}

.head-body-responsive {
    width: 70%;
    height: auto;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
}

.horizontalrule {
    float: right;
    border: 1px solid gray;
    width: 70%;
}

.head-body-ecommerce {
    width: 70%;
    height: auto;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

.head-body-search {
    width: 70%;
    height: auto;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

.head-body-more {
    width: 70%;
    height: auto;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

预期结果如下所示...

Answer 1

很难处理复杂的代码。但是我做了。

.head {
    background-color: rgba(193, 196, 195, .6);
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
}

.head-title {
    background-color: rgba(249, 58, 58, .7);
    text-align: center;
    border-radius: 5px;
    font-size: 35px;
    margin: 0 auto;
    width: 90%;
    color: white;
}

.head-subtitle {
    background-color: rgba(249, 58, 58, .7);
    text-align: center;
    border-radius: 10px;
    margin: 0 auto;
    width: 25%;
    color: white;
    font-size: 20px;
}

.head-body {
    font-size: 20px;
    padding: 15px 15px 15px 15px;
}

.head-body-main {
    width: 92%; /* you can do 100% */
    height: auto;
    border-right: 1px solid red;
    position: relative;
  padding:0 15px 0 0;
}

.head-body-responsive {
    width: calc(100% - 30px);
    height: auto;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
}

.horizontalrule {
    border: 1px solid gray;
    width: 100%;
}

.head-body-ecommerce {
    width: calc(100% - 30px);
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

.head-body-search {
    width: calc(100% - 30px);
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

.head-body-more {
    width: calc(100% - 30px);
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 15px 15px;
    border-left: 2px solid red;
}

.flex {
  display:flex;
}

<div class="head">
        <div class="head-title">
            <p>Pricing</p>
        </div>
        <div class="head-subtitle">
            <p>Incredibly low prices!</p>
        </div>
        <div class="head-body">
            <p>Just select the features you would like below to recieve an instant quote.</p>
            <hr>
          <div class="flex">
            <div class="a">
            <div class="head-body-main">
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
                <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
            </div>
         </div>
            <div class="b">
            <div class="head-body-responsive">
                <div id="responsive-image">
                    <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px">
                </div>
                <div id="responsive-content">
                    <h1>RESPONSIVE DESIGN</h1>
                    <p>The content on the site will automatically resize according to the device in use.</p>
                </div>
                <div id="responsive-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">

            <div class="head-body-ecommerce">
                <div id="ecommerce-image">
                    <img alt="eCommerce" src="images/features/ecommerce.png" width="175px" height="175px">
                </div>
                <div id="ecommerce-content">
                    <h1>WEB STORE</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="ecommerce-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            
            <hr class="horizontalrule">

            <div class="head-body-search">
                <div id="search-image">
                    <img alt="search" src="images/features/searchengineoptimization.png" width="175px" height="175px">
                </div>
                <div id="search-content">
                    <h1>SEO</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="search-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">

            <div class="head-body-more">
                <div id="more-image">
                    <img alt="more" src="images/features/extrafeatures.png" width="175px" height="175px">
                </div>
                <div id="more-content">
                    <h1>MORE FEATURES</h1>
                    <p>Customizable online store for your business.</p>
                </div>
                <div id="more-form">
                    <button class="btn btn-success">+ ADD</button>
                </div>
            </div>
            <hr class="horizontalrule">
            <div class="clear"></div>
        </div>
    </div></div></div>

Answer 2

为方便解决，请在代码中对显示：flex元素使用flex-direction选项。 （下面的示例带有清晰的编码）

.left {
  display: flex;
  flex-direction: row;
  width: 100%
}

.left>div:first-child {
  width: 30%;
  border: 1px solid red;
  padding: 15px
}

.right {
  flex-direction: column;
  width: calc(70% - 10px);
  margin-left: 10px;
  border: 1px solid red
}

.right>div {
  padding: 15px;
  border: 1px solid black;
  display: flex;
  flex-direction: row
 }
 
 .right>div>div:nth-child(2) {
   margin: 0px 10px
 }

<div class="left">
  <div>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
    <p>Some text for the left body. Some text for the left body. Some text for the left body.</p>
  </div>
  <div class="right">
    <div>
      <div>
        <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px"/>
      </div>
      <div>
        <h1>RESPONSIVE DESIGN</h1>
        <p>The content on the site will automatically resize according to the device in use.</p>
      </div>
      <div>
        <button class="btn btn-success">+ ADD</button>
      </div>
    </div>
    <hr/>
    <div>
      <div>
        <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px"/>
      </div>
      <div>
        <h1>RESPONSIVE DESIGN</h1>
        <p>The content on the site will automatically resize according to the device in use.</p>
      </div>
      <div>
        <button class="btn btn-success">+ ADD</button>
      </div>
    </div>
    <hr/>
    <div>
      <div>
        <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px"/>
      </div>
      <div>
        <h1>RESPONSIVE DESIGN</h1>
        <p>The content on the site will automatically resize according to the device in use.</p>
      </div>
      <div>
        <button class="btn btn-success">+ ADD</button>
      </div>
    </div>
    <hr/>
    <div>
      <div>
        <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px"/>
      </div>
      <div>
        <h1>RESPONSIVE DESIGN</h1>
        <p>The content on the site will automatically resize according to the device in use.</p>
      </div>
      <div>
        <button class="btn btn-success">+ ADD</button>
      </div>
    </div>
    <hr/>
    <div>
      <div>
        <img alt="Responsive" src="images/features/responsive.png" width="175px" height="175px"/>
      </div>
      <div>
        <h1>RESPONSIVE DESIGN</h1>
        <p>The content on the site will automatically resize according to the device in use.</p>
      </div>
      <div>
        <button class="btn btn-success">+ ADD</button>
      </div>
    </div>
  </div>
</div>

如何使用浮动和定位并排创建两个单独的div？

2 个答案: