少しずつサイズの違う画像を同じ位に縮小して横に並べたい

Question

過去の質問やネットで調べながら思考錯誤していたのですがうまくいかず、皆様からご教授いただきたく質問させていただきます。
横並びなのではじめはflexを使っていたのですが、思うようにいかなかった為、floatで試してみましたがこちらも満足いくものにはなりませんでした。皆様宜しくお願い致します。

コード
<div class="carcos">
<p class="sample1"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="ああ"></a></p>
</div>
<div class="carcos">
<p class="sample2"><a href="car-costam.html"><img src="images/***2.jpg" width="640" height="425" alt="い"></a></p>
</div>
<div class="carcos">
<p class="sample3"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="426" alt="う"></a></p>
</div>

.sample1 img{
	height: auto;
	width: 30%;
	margin-top: 10px;

.sample2 img{
	height: auto;
	width: 35%;
}
.sample3 img{
	height: auto;
	width: 40%;
}
.carcos{
	float:left;
	width: 33%
}

Comments

[dit.]

コード用のマークダウンがうまくいっていませんので、下記のような形にしてください。
```html
ここにHTML
```
1行以上開ける
```css
ここにCSS
```

[let]

修正できました。ご教授いただけると助かります。宜しくお願い致します。

Answer 1

.sample1 img{を閉じる}がありませんが、実際のコードでもこのようになっていますか？
転記の際のミスでなければ

.sample1 img{
    height: auto;
    width: 30%;
    margin-top: 10px;
}/*これを追加*/
.sample2 img{
/*以下省略*/

としましょう。

これで画像自体は横並びになっていると思いますが、floatを使う場合は適宜回り込みを解除する(clear)必要がありますのでご注意を。

---

flexを使う場合には、carcosをdivなどで囲み、それに対してdisplay: flex;を指定しましょう。

<div class="carcos-container">
  <div class="carcos">
    <p class="sample1"><a href="car-costam.html"><img src="http://placehold.jp/640x480.png" width="640" height="480" alt="ああ"></a></p>
  </div>
  <div class="carcos">
    <p class="sample2"><a href="car-costam.html"><img src="http://placehold.jp/640x425.png" width="640" height="425" alt="い"></a></p>
  </div>
  <div class="carcos">
    <p class="sample3"><a href="car-costam.html"><img src="http://placehold.jp/640x426.png" width="640" height="426" alt="う"></a></p>
  </div>
</div>

.sample1 img {
  height: auto;
  width: 30%;
  margin-top: 10px;
}
.sample2 img {
  height: auto;
  width: 35%;
}
.sample3 img {
  height: auto;
  width: 40%;
}
.carcos-container {
  display: flex;
}
.carcos {
  width: 33%;
  width: calc(100% / 3);
}

flexboxを使った場合のサンプル（上記のコード）
こうなるはず

細かい設定は下記など参考に調整してみてください。
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

Comments

[let]

ご返信頂きありがとうございます。
記載いただいた通りに変更してみたのですが、sample1 imgの画像が全く縮小されません、他の画像は縮小されるのですが、縦並びのままです。
記載いただいた、fiexで試してみました。他に何か要因があるのでしょうか？
ご教授いただけるとありがたいです。宜しくお願い致します。

[dit.]

回答に示したflexの方のサンプルをcodepenにあげました。
https://codepen.io/dit4410/pen/VwKZbdV
各carcosはcarcos-containerの1/3の横幅、
各画像はcarcosに対してそれぞれ30%、35%、40%のサイズになっていると思いますが希望とは違いますか？

[let]

ご返信ありがとうございます。
画像の二個目、三個目は縮小されたので思っていたより小さかった為、変動しなかった、一つ目から
５０％、５５％、５５％に変更しました。ただ縦並びなのでどういう風になるのかまだ掴めていない状況です。ul liを使った横並びの方がいいんでしょうか？

[let]

ローカルでみると、一つ目も縮小されていました。ただ横並びにはなっていないです。どこの設定なのでしょうか？どこが間違っているか判断がつかない為ご迷惑をお掛けし申し訳ありません。
ご教授いただけると幸いです。

[dit.]

先ほど提示したcodepenでも縦並びに見えますか？
一応Windows10、主要ブラウザ（Google Chrome、Firefox、Microsoft Edge、Internet Explorer）で横並びになっているのは確認したつもりなのですが。

リストを使っても結局floatかflexboxで指定することになるので状況は変わらないと思います。

いくつか可能性があるところを提示しておきます。
・<div class="carcos">３つを<div class="carcos-container">で囲ってありますか？（回答で提示したflexbox版のコードを丸々使っても同じですか？）
・きちんと保存できていますか？保存したものと表示しているコードは同じものですか？
・（サーバー上で確認している場合）アップロードはきちんとできていますか？
・キャッシュの削除やスーパーリロードはしましたか？

一度、質問を編集し現状のコードを追記してください。

[let]

・codepenでは横並びに見えています。
・保存はきちんとして確認しております。
・サーバー上も確認してアップロードして確認しております。
・キャッシュの削除はしてます。
現状のコードを追記します

<div class="corcos-container">
<div class="carcos">
<p class="sample1"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="あ"></a></p>
</div>
<div class="carcos">
<p class="sample2"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="い"></a></p>
</div>
<div class="carcos">
<p class="sample3"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="う"></a></p>
</div>
</div>

CSS
.sample1 img{
height: auto;
width: 50%;
margin-top: 10px;
}
.sample2 img{
height: auto;
width: 55%;
}
.sample3 img{
height: auto;
width: 55%;
}
.carcos-container {
display: flex;
display : -webkit-box; /* old Android */
display : -webkit-flex; /* Safari etc. */
display : -ms-flexbox; /* IE10 */
}
.carcos{
width: 33%;
width: calc(100% / 3);
}

[dit.]

HTML側のクラスがcorcos-containerになっています。carcos-containerに直してみてください。

[let]

横並びになりました。本当にありがとうございます。またひとつ勉強になりました。
長い時間おつきあいいただきありがとうございました。
サーバーアップロードしても同様の動作になりました。
本当にありがとうございました。

[dit.]

解決したようで何よりです。