html - 如何使用 float 和定位并排创建两个独立的div？

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>