1

いくつかの画像に特定のレイアウトを作成しようとしています。作りたいレイアウト。

小さい画像を大きな画像の横に並べて配置しようとしましたが、これは clearfix を追加すると機能しますが、何らかの理由で画像に適用した幅が有効ではなくなりました。つまり、適切な位置にある大きな画像か、あちこちにある小さな画像のどちらかです。

すべての画像を個別の div タグに入れ、次に親 div に入れてみましたが、それには独自の問題があります。

これは HTML と CSS で行うことができますか、それとも jQuery ルートをたどる必要がありますか?

私はコードを整理します。頭の中に正しく入れようとしているだけです。

HTML:

<section id="galleryposition">
    <ul id="gallery">
        <div id="mainimage">
        <li>
          <a href="img/8.jpg">
            <img src="img/8.jpg" alt=""></a>
          </li>
          </div>
        <div id="smallphotos">
      <div id="smalllefttop">
          <li>
          <a href="img/2.jpg">
            <img src="img/2.jpg" alt="">
            </a>
          </li>
    </div>
      <div id="smallrighttop">
          <li>
          <a href="img/3.jpg">
            <img src="img/3.jpg" alt="">
            </a>
          </li>
          </div>
      <div id="smallleftbottom">
          <li>
          <a href="img/4.jpg">
            <img src="img/4.jpg" alt="">
            </a>
          </li>
          </div>
      <div id="smallrightbottom">
          <li>
          <a href="img/5.jpg">
            <img src="img/5.jpg" alt="">
            </a>
          </li>
          </div>
           </div>
         </ul>
</section>

CSS:

#gallery {
  margin: 50px 0 0 0;
  padding: 0;
  list-style: none;

}

#galleryposition {
    text-align: center;


}

#gallery img {   
border-radius: 2.5%;

}

#gallery li {
  float: left;
  margin: .5%;
  color: #bdc3c7;

}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

#smalllefttop group {
    max-width:50%;
    float:left; 
}



#smallrighttop group{
    max-width: 50%;
    float:right;

}

#smallleftbottom group{
    min-width:50%;
    float:left;

}

#smallrightbottom group{
    min-width:50%;
    float:right;

}

https://jsfiddle.net/apdeng/wyvzmm9q/1/

前もって感謝します。

4

1 に答える 1

0

わかりましたので、コードをいじり始めましたが、基本的には再起動するだけでした。これは SO の目的ではないため、考慮する必要があることがいくつかあります。

  1. <ul>タグはリスト用です。この定義は、ナビゲーションに使用されるリンクの「リスト」を作成する開発者によって拡張されることがよくありますが、この場合、イメージ レイアウトは<ul>and<li>構造の使用によって複雑になります。a)とタグ<div>の両方を必要とせず、b) これは実際にはリストではないため、意味的により意味のある単純なタグを使用することをお勧めします。<ul><li>
  2. #mainimage div のように a<div>を内部に配置するのは悪い習慣です。<ul>
  3. CSSのセレクターgroupは実際には何もしていません。これまでに見たことがなく、そのキーワードがどのような目的に役立つのか思いつかなかったので、これをグーグルで検索しました. 「グループ」が後に続く要素は、適用しようとしているスタイルを取得していません。私はあなたのcssからそれを削除します。
  4. widthあなたのcss（ではないmax-width）で単純な古いものを使用すると、より多くの成功を収めることができます
  5. <br>タグを使用してレイアウトにスペースを作成しないでください。代わりにマージンとパディングを使用してください。
  6. すべてのタグが閉じられ、開かれていることを確認してください。JSfiddle がテキストを赤く強調表示する場合、タグの一部が欠落していることを意味します。(あなたの場合、</a>各グループのタグが多すぎます。)

基本的に行う必要があるのは、マークアップをできる限りクリーンアップし、その大きな画像の幅を約 50% にし、他の各画像の幅を約 25% にすることです。大まかに言うと、それらすべての間にマージンを追加する場合、幅の合計を 100% まで追加する必要があるためです (それ以上になると、一部の要素が次の行にぶつかります)。画像に幅を追加しようとしたときに問題が発生したのは、おそらくこれが原因です。横のブロックのマージンを削除するのに役立つ、nth-childまたはセレクターを見てください。last-child

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2016-01-14T19:18:27.743 に答える