Question

上面的屏幕截图显示了问题。与其他类似问题不同，我不需要将其用于国际文本。我需要这个适用于不同的屏幕尺寸和不同数量的文本。该文本将来自生产中的数据库，因此我不能简单地找出div需要提前向下移动的断点。

我正在寻找的解决方案首先将文本块移动到图像下方，然后根据需要垂直调整文本div以适应所有文本。 JS或CSS解决方案都很好。

下面的HTML：

<div class="product">
    <img class="productImg" src="http://placehold.it/300x240">
    <div class="productTxt">
        <h1>Title</h1>
        <h3>Price</h3>
        <p>Suspendisse sed fermentum neque, vel rutrum velit. Curabitur eget dolor luctus, sodales felis sed, dapibus justo. 
        Suspendisse in condimentum ante. Sed nec dui tristique, sollicitudin velit eget, ultricies dui. 
        Ut rhoncus ornare urna, quis venenatis velit ornare eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Etiam ornare sem finibus lectus volutpat, in feugiat elit ultrices. In sed vulputate eros, quis volutpat elit. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi libero, posuere nec laoreet quis, viverra et lorem. Duis odio ante, efficitur et felis at, tincidunt interdum ante.
        Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum dui at cursus. Aliquam mollis nec magna ac mattis. 
        Nam nec est tincidunt leo facilisis finibus non nec mauris. Vestibulum rutrum tristique tincidunt. </p>
    </div>
</div>

CSS：

.product {
    box-sizing: border-box;
    margin: 0px;
    padding: 10px;
    width: 100%;
    height: 330px;
    border-bottom: 2px solid #16A085;
}

.productImg {
    width: 240px;
    height: 300px;
    display: inline-block;
    position: relative;
}

.productTxt {
    box-sizing: border-box;
    vertical-align: top;
    display: inline-block;
    height: 100%;
    width: calc(100% - 270px);
    padding: 10px;
    text-align: center;
    position: relative;
    border: 2px solid blue;
 }

我无法真正删除productTxt div的相对位置而不会破坏同一div内的另一个元素的位置（为了简单起见，我在这个例子中删除了它）

Answer 1

删除父div .product中的固定高度，并将min-width添加到.productTxt。如果您对100%或width使用height，则它相对于父div，您必须专门设置父{q} {}}或width。这就是为什么height height: 100% .productTxt根据您的内容未发生变化，并已固定为父级.product的{{1}}。

height: 330px

Answer 2

要移动图片下方的文本块，请从display: inline-block;课程中移除.productTxt。如果您想保持.product类修正的高度，请根据.productTxt类调整.product的高度，并将overflow: auto;提供给.productTxt所有数据将使用滚动面板显示，因此您的HTML

<div class="product">
     <img class="productImg" src="http://placehold.it/300x240">
     <div class="productTxt">
         <h1>Title</h1>
         <h3>Price</h3>
         <p>Suspendisse sed fermentum neque, vel rutrum velit.   
            Curabitur eget dolor luctus, sodales felis sed, dapibus  
            justo.Suspendisse in condimentum ante. Sed nec dui  
            tristique,sollicitudin velit eget, ultricies dui. 
            Ut rhoncus ornare urna, quis venenatis velit ornare eu.       
            Pellentesque habitant morbi tristique senectus et netus et  
            malesuada fames ac turpis egestas.
            Etiam ornare sem finibus lectus volutpat, in feugiat elit   
            ultrices. In sed vulputate eros, quis volutpat elit. 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse nisi libero, posuere nec laoreet quis, viverra  
            et lorem. Duis odio ante, efficitur et felis at, tincidunt  
            interdum ante.  
            Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum   
            dui at cursus. Aliquam mollis nec magna ac mattis. 
            Nam nec est tincidunt leo facilisis finibus non nec  
            mauris.Vestibulum rutrum tristique tincidunt.
        </p>
       </div>
</div>

你的CSS将是

.product {
    box-sizing: border-box;
    margin: 0px;
    padding: 10px;
    width: 100%;
    height: 550px;
    border-bottom: 2px solid #16A085;
}

.productImg {
    width: 240px;
    height: 300px;
    display: inline-block;
    position: relative;
}

.productTxt {
   box-sizing: border-box;
   vertical-align: top;
   height: 230px;
   width: calc(100% - 270px);
   padding: 10px;
   text-align: center;
   position: relative;
   border: 2px solid blue;
   overflow: auto;
}

文本溢出Div

2 个答案: