2枚のカードを同じ行に置くようにする

Question

私はウェブサイトで作業しています。

：

.header { 
 
    text-align: center; 
 
    color: #ffffff; 
 
    font-family: Trebuchet MS; 
 
} 
 

 
body { 
 
    background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); 
 
    background-attachment: fixed; 
 
} 
 

 
.img { 
 
    text-align: center; 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: #0645AD; 
 
} 
 

 
a:visited { 
 
    text-decoration: none; 
 
    color: #0645AD; 
 
} 
 

 
a:active { 
 
    text-decoration: none; 
 
    color: #0B0080; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    color: #0B0080; 
 
} 
 

 
.cardPlain { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    border-radius: 10px; 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.container { 
 
    padding: 2px 16px; 
 
    width=70%; 
 
    margin: auto; 
 
} 
 

 
.control-width { 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.card, 
 
.control-width.card { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    border-radius: 10px; 
 
    margin: auto; 
 
    width: 100%; 
 
}

<h1>&nbsp</h1> 
 
<div class="control-width"> 
 
    <a href="bio.html"> 
 
    <div class="card"> 
 
     <p>&nbsp</p> 
 
     <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p> 
 
     <div class="container" style="text-align:center"> 
 
     <h2 class="header">Hi, I'm rappatic.</h2> 
 
     <p class="header">I code when I feel like it.</p> 
 
     <p>&nbsp</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div> 
 

 
<h1>&nbsp</h1> 
 

 
<div class="cardPlain"> 
 
    <div class="container" style="text-align:center"> 
 
    <h3 class="header">My Stuff</h3> 
 
    <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p> 
 
    <p class="header"><a href="downloads.html">Downloads</a></p> 
 
    <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p> 
 
    <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p> 
 
    </div> 
 
</div> 
 

 
<div class="cardPlain"> 
 
    <div class="container" style="text-align:center"> 
 
    <h3 class="header">Foo</h3> 
 
    <p>bar</p> 
 
    <p>Some content</p>

（効果を得るために、出力のサイズを変更します）ので、アイデアは、このように、プレースホルダ（FOO）と同じ行に表示するには、ダウンロード用のdivを強制することです私が試した

すべてが（this、this、thisとthis）、実際には動作しません。私がdisplay: inline-blockのことをやろうとすると、左に2つのdivが表示されます。

2つのdivを同じ行に表示するにはどうすればよいですか？

Answer 1

このように親divにあなたのcardPlain divをラップし、display: flexで親divのスタイルを設定します。これは水平に整列させますが、高さに合わせて各コンテナの高さを調整する必要があります。

FLEXフレックスボックストリックの詳細はこちら。

<div style="display: flex"> 
    <div class="cardPlain"> 
    </div> 
    <div class="cardPlain"> 
    </div> 
<div> 

.header { 
 
    text-align: center; 
 
    color: #ffffff; 
 
    font-family: Trebuchet MS; 
 
} 
 

 
body { 
 
    background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); 
 
    background-attachment: fixed; 
 
} 
 

 
.img { 
 
    text-align: center; 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: #0645AD; 
 
} 
 

 
a:visited { 
 
    text-decoration: none; 
 
    color: #0645AD; 
 
} 
 

 
a:active { 
 
    text-decoration: none; 
 
    color: #0B0080; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    color: #0B0080; 
 
} 
 

 
.cardPlain { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    border-radius: 10px; 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.container { 
 
    padding: 2px 16px; 
 
    width=70%; 
 
    margin: auto; 
 
} 
 

 
.control-width { 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 

 
.card, 
 
.control-width.card { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    border-radius: 10px; 
 
    margin: auto; 
 
    width: 100%; 
 
}

<h1>&nbsp</h1> 
 
<div class="control-width"> 
 
    <a href="bio.html"> 
 
    <div class="card"> 
 
     <p>&nbsp</p> 
 
     <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p> 
 
     <div class="container" style="text-align:center"> 
 
     <h2 class="header">Hi, I'm rappatic.</h2> 
 
     <p class="header">I code when I feel like it.</p> 
 
     <p>&nbsp</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div> 
 

 
<h1>&nbsp</h1> 
 

 
<div style="display: flex;"> 
 
    <div class="cardPlain"> 
 
    <div class="container" style="text-align:center"> 
 
     <h3 class="header">My Stuff</h3> 
 
     <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p> 
 
     <p class="header"><a href="downloads.html">Downloads</a></p> 
 
     <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p> 
 
     <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="cardPlain"> 
 
    <div class="container" style="text-align:center"> 
 
     <h3 class="header">Foo</h3> 
 
     <p>bar</p> 
 
     <p>Some content</p> 
 
    </div> 
 
    </div> 
 
</div>