右下隅に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>

@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こんにちは回答仕事をしましたか？私はあなたの便宜のためにいくつかの情報を追加しました。私が助けることができるものがありますか？ありがとうと乾杯:) –

CSSは、それが次の親要素に相対的であるので、position:relative;

ボタンが内側に絶対位置を持っている<div class="item">列に追加相対的（または絶対的）な姿勢でイオン化。また

、それはあなたもあなたがする必要がどのようなあなたの更新JSFiddle

出典

2016-06-11 11:18:58

インラインスタイル、悪い考え –

@MuhammadUsman兄弟、それは単なる例であり、インラインスタイリングは本当にdownvoteの理由ではありません...私は彼がクラスから自分自身を変更する方法を知っていると信じています彼は彼のjsfiddleでクラスを使っていた...とにかく私はあなたのためにそれを更新した –

はちょうど最後の列にPosition: relative;を追加でpadding-bottom

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

を設定することができ、テキストを重複しないようにします。これにより、続きを読む divは、メインDIVの代わりにダイレクトペアレントDIVの右下隅になるようになります。 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

、あなたは三分の一を保つことができるjsFiddle更新

段落の中にも記述があり、それは私たちによって達成可能ですあなたのブラウザのサポートがIE10 +の場合、gssss 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 { 
 
\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を配置して列内に配置する

答えて

関連する問題