在列的右下角放置一個div

我試圖對齊特定列內右下角的div，但是全部替代它對齊主要父級的右下角。在列的右下角放置一個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; 
}

來源

2016-06-11 theOGloc

加上'.item {位置：相對;}'https://jsfiddle.net/L9vg468g/2/ –

@theOGloc喜做了回答工作？爲了您的方便，我添加了更多信息。有什麼我可以幫助嗎？感謝和歡呼:) –

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

該按鈕內具有絕對位置，從而它能夠相對於所述下一個父元素與相對（或絕對）位置ioning。

此外，使其不重疊的文字還可以設置padding-bottom

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

你更新JSFiddle

來源

2016-06-11 11:18:58

內聯樣式，壞主意 –

@MuhammadUsman兄弟，這只是一個例子，內聯樣式真的不是downvote的理由......我相信他知道如何將它自己改變成一個類，如果他希望他在他的jsfiddle中使用了課程......無論如何我爲你更新了它 –

你需要做的只是添加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; 
}

來源

2016-06-11 11:30:17

正如你已經把另外兩列，說明段落標記內，你可以保持第三也可以在一個段落內描述，它可以通過使用來實現g css flexbox如果您的瀏覽器支持是IE10 +。

更新後的代碼如下。

.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 { 
 
\t 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>

來源

2016-06-11 11:57:42 San

在列的右下角放置一個div

回答

相關問題