Question

我有两个并排的div但似乎无法确定如何使它们响应。

寻找合适的方框，以600px或更低的价格落在左侧框下方，保持我在div中完成的所有其他中心。

每个并排的div分别具有.div-seller-resources-left和.div-seller-resources-right。

我已经使用600px的媒体屏幕作为每个文本框的高度，所以我也将使用600作为断点。

在正常尺寸的浏览器中附加照片，以及在较小的屏幕上显示的内容。正如你所知道的那样，较小的屏幕只是尽可能地将所有内容整合到一个页面上。

＆＃13;

/* formats the seller-resources page */
.div-header-seller-resources{
    font-size:30px;
    line-height:32px;
    margin-bottom:10px;
}
.div-detail-seller-resources{
    font-size:20px;
    line-height:22px;
    margin-bottom:45px;
}
/*sets the height of the div so each text box is the same size no matter how much text*/
.seller-resources-height{
    height: 125px;
}
/*main container of two side by side boxes*/
.div-main-container-seller-resources{
    width:100%;
    margin-top:30px;
    text-align: center;
    display: flex;
    justify-content: center;
}
/*div under main container, containing both right and left seller resourcs */
.seller-resources-inner{
    display: flex;
    flex-direction:row;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-left{
    width: 300px;
    display: flex;
    text-align:center;
    margin:0px auto;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-right{
    width: 350px;
    display: flex;
    text-align:center;
    margin:0px auto;
}
/* sets the text box screens taller at smaller screens so they don't overlap */
@media screen and (max-width: 600px) {
   .seller-resources-height{
    height:200px;
    }
}
@media screen and (max-width: 600px) {
   div-seller-resources-left .div-seller-resources-left{
    width:100%;
    }
}

＆＃13;

<div class="div-main-container-seller-resources">
    <div class="seller-resources-inner">
    <div class="div-seller-resources-left" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
            <div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
          </div>
            <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/referrals/">Referrals</a></div>
            <div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
        </div>
        <div class="clear"></div>
         <div class="seller-resources-height">
                <div class="div-header-seller-resources"><a href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
            <div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
         </div>
        <div class="clear"></div>
    </div>
    <div class="div-seller-resources-right" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
            <div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/advanced-product-shipping/">Advanced Shipping &amp; Product Options</a></div>
            <div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard &amp; Payment</a></div>
            <div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
        </div>
        <div class="clear"></div>
                </div>  
    </div>
</div>

＆＃13;

Answer 1

我建议使用flex-wrap属性。在这种情况下，您可以将元素强制为单个列。（见MDN Docs）

只需将flex-wrap: wrap;应用于.seller-resources-inner课程（请参阅下面的代码段）。

＆＃13;

/* formats the seller-resources page */

.div-header-seller-resources {
  font-size: 30px;
  line-height: 32px;
  margin-bottom: 10px;
}

.div-detail-seller-resources {
  font-size: 20px;
  line-height: 22px;
  margin-bottom: 45px;
}


/*sets the height of the div so each text box is the same size no matter how much text*/

.seller-resources-height {
  height: 125px;
}


/*main container of two side by side boxes*/

.div-main-container-seller-resources {
  width: 100%;
  margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
}


/*div under main container, containing both right and left seller resourcs */

.seller-resources-inner {
  display: flex;
  flex-direction: row;
}


/*margin here centeres all the content within the div*/

.div-seller-resources-left {
  width: 300px;
  display: flex;
  text-align: center;
  margin: 0px auto;
}


/*margin here centeres all the content within the div*/

.div-seller-resources-right {
  width: 350px;
  display: flex;
  text-align: center;
  margin: 0px auto;
}


/* sets the text box screens taller at smaller screens so they don't overlap */

@media screen and (max-width: 600px) {
  .seller-resources-height {
    height: 200px;
  }
  .seller-resources-inner {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 600px) {
  div-seller-resources-left .div-seller-resources-left {
    width: 100%;
  }
}

＆＃13;

<div class="div-main-container-seller-resources">
    <div class="seller-resources-inner">
    <div class="div-seller-resources-left" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
            <div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
          </div>
            <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/referrals/">Referrals</a></div>
            <div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
        </div>
        <div class="clear"></div>
         <div class="seller-resources-height">
                <div class="div-header-seller-resources"><a href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
            <div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
         </div>
        <div class="clear"></div>
    </div>
    <div class="div-seller-resources-right" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
            <div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/advanced-product-shipping/">Advanced Shipping &amp; Product Options</a></div>
            <div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard &amp; Payment</a></div>
            <div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
        </div>
        <div class="clear"></div>
                </div>  
    </div>
</div>

＆＃13;

两个并排的分区 - 增加响应能力

1 个答案: