在列内的右下角放置一个 div答案

【问题标题】：Place a div in bottom right corner inside a column在列内的右下角放置一个 div
【发布时间】：2016-06-15 06:15:20
【问题描述】：

我试图在特定列内的右下角对齐一个 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;
}

【问题讨论】：

添加.item {position: relative;}jsfiddle.net/L9vg468g/2
@theOGloc 嗨，答案有效吗？为了您的方便，我添加了更多信息。还有什么我可以帮忙的吗？谢谢和干杯:)

标签： html css

【解决方案1】：

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

里面的按钮有一个绝对位置，所以它相对于下一个具有相对（或绝对）定位的父元素。

另外，为了不与文字重叠，您还可以设置padding-bottom

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

您更新的JSFiddle

【讨论】：

内联样式，坏主意
@MuhammadUsman 兄弟，这只是一个例子，内联样式真的不是拒绝投票的理由......我相信他知道如果他愿意的话，他知道如何将它自己更改为一个类，因为他使用了类他的 jsfiddle ......无论如何我为你更新了它

【解决方案2】：

您只需将Position: relative; 添加到最后一列即可。这将使 Read more 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;
}

【讨论】：

【解决方案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>

【讨论】：