2

まず、問題の特定のマークアップ/スタイリングのjsfiddleを次に示します。

主な問題は、img とテキスト ボックス (dark_block) のマージンが同じでない理由です。どちらもコンテナ div の幅 100% に設定されているため、何が起きているのかわかりません。見てみませんか？

私がまだ理解しようとしている他のことと、グーグル（これまでのところ）は私を助けませんでした：

  • テキスト ボックスが写真コンテナーのインライン (左側) にある場合、写真コンテナーと同じ高さにするにはどうすればよいですか?
  • 画像の幅が写真コンテナよりも小さい場合、水平方向と垂直方向の中央に配置するにはどうすればよいですか?
  • アクセシビリティのために、@media タグの前に応答しないバージョンの css を作成することはできますか?

申し訳ありませんが、私は Web 開発に慣れていないので、何か助けていただければ幸いです。また、コード フラグメントのどこかがひどく完成しているように見える場合は、私に連絡してください。目前の問題を解決することに加えて、いくつかのベストプラクティスを学びたいです。特にディスプレイの種類については、頭を悩ませています。

これをご覧いただきありがとうございます。

ジョン

コード：

<div id="home_top_container">
    <div id="photo_slider">
        <img src="redacted">
    </div>
    <div id="dark_block"></div>
</div>

#home_top_contianer {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
@media screen and (min-width: 800px){
    #photo_slider{
        float:right;
        background-color: #cccccc;
        padding: 0px;
        width: 69%;
        min-width: 500px;
        display: inline-block;
    }
}

@media screen and (max-width: 799px){
    #photo_slider{
        float:none;
        background-color: #cccccc;
        padding: 0px;
        width: 100%;
        min-width: 500px;
        display: inline-block;
    }
}
@media screen and (min-width: 800px){
    #dark_block {
        float:left;
        background-color: #383838;
        padding: 10px;
        width: 28%;
        display: inline-block;
    }
}
@media screen and (max-width: 799px){
    #dark_block {
        float:left;
        background-color: #383838;
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        min-height: 200px;
        display: inline-block;
    }
}

img {
    max-width: 100%;
    margin: 0px;
}
4

1 に答える 1