Question

我有2个与我的无序列表相关的简单交织问题，这些问题引起了我数小时的头痛。 ul中的每个li包含1个图像和3个div。 div是标题框，位置框和价格框。每个div中都有文本。下面是一个JsFiddle演示以及我需要的截图。

李看起来像：

<li>
     <center><img src="LINK_TO_PHOTO"></center>
    <div class="titlebox">Circa 1930 on the River</div>
       <div class="locationbox">Lawrencetown</div>
     <div class="pricebox">Offered at $249,000</div>
</li>

我的问题是：

我希望标题框（及其中的文字）拉伸其上方图像的确切宽度，因此没有悬垂。这意味着如果用户的显示器较大，文本必须变大，因为图像宽度是％并且是响应的，因此文本大小也必须是响应的。
我还需要将pricebox（底部div）放在绿色框的底部。我希望位置框平均位于上面的标题框和下面的价格框之间。

第3个方框的标题为2行，但我仍然需要将“Medford”位置与左边的位置对齐。所以我不能在这里使用margin-top：％因为它会将第三个盒子的位置/价格推得太低（因为2行标题）。

以下是我需要的截图。 Screenshot

看看我如何需要标题和价格来拉伸与图像相同的宽度？

以下是目前的情况：jsFiddle

任何帮助都会很棒！非常感谢你

Answer 1

我使用以下内容横向居中block和inline元素......

CSS类

.center
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

请注意，在某些情况下，您需要将CSS类应用于父元素，而不是直接应用于元素本身。此外，如果父元素的宽度折叠（例如使用float），则必须将元素集中在元素中，同时将类移动到父元素的父母。

Answer 2

我不确定这是解决价格间距问题的最佳方法，但由于您知道有3个div和1个图像，因此您可以简单地划分父母div的高度。像这样：

#pictureBox
{
  margin-left: auto;
  margin-right: auto;
  height: 50%;
}

#titleBox
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 25%;
}

#locationBox
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 15%;
}

#priceBox
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 10%;
}

我相信你必须玩这个百分比，直到你找到一个合适的空间，但我认为这会适当地分配空间。

Answer 3

以下是我想到的一些内容：http://jsfiddle.net/00gdax7m/8/

.titlebox {
   width: 80%;
   display: inline-block;
   font-size: 17px;
   font-size: 1.9vw;
   margin-left: 10%;
   margin-right: 10%;
   line-height: 100%;
   font-family: Garamond;
   color: #002000;
   text-align: center;
   height: 20%;

}

.locationbox {

   width: 100%;
   display: inline-block;
   font-size: 25px;
   line-height: 100%;
   font-family: Garamond;
   color: #002000;
   font-style: italic;
   text-align: center;
   height:20%;
}

.pricebox {
    position:relative;
    bottom:0;
    width: 100%;
    font-size: 32px;
    line-height: 100%;
    text-align: center;
    font-family: Garamond;
    color: #002000;
    height: 20%;
}

.houseImage
{
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   margin-top: 5px;
   height: 36%;
}

主要提示：

我在这里找到了一个答案，解释了使用大众单位有助于你的字体大小调整。答案是要注意浏览器的兼容性。 Pure CSS to make font-size responsive based on dynamic amount of characters
正如另一位用户所说。确保正确使用CSS集中。
要使你的元素均匀分布空间，请调整li中div的高度％（BlueBaroo在我输入时回答相似）

如何在div中对齐文本

3 个答案: