Question

我试图在特定列的右下角对齐一个div，但所有它都在主要父级的右下角对齐。

https://jsfiddle.net/jonnijonnason/L9vg468g/

如果你检查小提琴，我希望它在图像下方对齐。

HTML

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Arbetsprov | Baldvin Haraldsson</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>

            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

</html>

CSS

@charset "UTF-8";
.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
}

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

添加到<div class="item">列position:relative;

内部按钮具有绝对位置，因此它相对于具有相对（或绝对）定位的下一个父元素。

此外，为了使其不与文本重叠，您还可以设置padding-bottom

.item.contains-button {
  position:relative;
  padding-bottom:60px;
}

您更新的JSFiddle

Answer 2

您需要做的只是将Position: relative;添加到最后一列。这会使了解更多 div位于直接父DIV的右下角，而不是主DIV。

更新了jsFiddle：https://jsfiddle.net/L9vg468g/4/

<强> HTML：

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>

            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item lastcol">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

<强> CSS：

@charset "UTF-8";
.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
    position: relative;
}
.item.lastcol {
  position: relative;
}
.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 3

由于您已在段落标记内放置了其他两列描述，因此您可以在段落中保留第三个描述，如果您的浏览器支持是IE10 +，则可以使用css flexbox实现。

以下更新的代码。

.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
    display: flex;
    flex-direction: column;
}

.row {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: relative;
    bottom: 0;
    right: 0;
}
.item h3 {
	order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Arbetsprov | Baldvin Haraldsson</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
                
            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item lastcol">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
                
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p> 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

</html>

在列的右下角放置一个div

3 个答案: