javascript - cssまたはjavascriptで新しい行を作成する方法は?

Question

たとえば、n 個の画像があり、4 つの画像を 1 行に並べたい場合、CSS または js でそれを行う方法はありますか? 画像は AJAX で動的にアップロードされるため、動的な方法が必要だと思います。

Answer 1

CSS3 を使用したもう少し洗練された回答

HTML

<div class="image_row">
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
</div>

スタイル .image_row { width:400px; }

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

動的な幅/高さを解決し、4 つの画像すべてを一列に並べます。

http://jsfiddle.net/gAWyU/

編集: 要求に応じて、mozilla と標準のコードを追加しました。

更新 この回答を少しだけ更新します。css3calc関数の驚くべき点は、コンテナーの div を任意のサイズにできることです。この例では 400px を使用しましたが、私のソリューションを使用して流動的にしたい場合は、それも機能します。

これは、私のソリューションでは、画像の幅が常に親 div の幅の 1/4 になるためです。

画像の幅が広すぎることが心配な場合は、固定の最小幅を設定し、最大幅を親 div と一致するように設定することもできます。これが実際の例です：

フィドル

親 div の最小幅のみを設定する必要があることに注意してください。画像は常に親 div の幅の 1/4 になるためです。

CSSは次のとおりです。

.image_row
{
    width:100%;
    min-width:400px;
}

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

Answer 2

HTML や JS を変更せずに実行できます。

#myDiv img{
    display:block;
    float:left;
    width: 100px;
    height: 100px;
    border: 1px solid white;
}
#myDiv img:nth-child(4n+1){
    clear:left;
}

nth-child(4n+1) は、これらのルール (clear:left) を 4 つおきの画像に適用することを意味しますが、位置 1 から開始します。

Answer 3

を追加し、 (CSS で) 行の 4 つの画像に合わせてdiv設定します。widthそれらは自動的にスタックします。このようなもの：

<div style="width: 400px">
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
</div>

Answer 4

単純な CSS だけがそれを行います。

img{margin-bottom:5px;display:block; clear:both;}

クリア:両方; フロートの継承をクリアすることにより、画像を新しい行に送信し、前の要素の下に自動的に配置します。

その中に他のスタイルを追加できますが、エフェクトを使用してオーバーライドしていないことを確認してくださいfloat:)

作業フィドルへのリンク：http://jsfiddle.net/MarmeeK/W3bsH/

これはあなたの仕事を一行で行います:)

Answer 5

div の新しいブロックを定義し、その中に固定幅の div の別の 4 ブロックを定義します。

<div class="image-container">
      <div style="width:100px" id="1"></div>
      <div style="width:100px" id="2"></div>
      <div style="width:100px" id="3"></div>
      <div style="width:100px" id="4"></div>
</div>

各 div 内に画像を追加するため、画像の幅に関係なく、1 行あたり 4 つの画像しかありません。

Answer 6

cssのfloatプロパティで簡単にできます

<div style="/*total width of your 4 images placed side by side*/">
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
</div>

Answer 7

JavaScript を使用して実行できます。画像を N*4 マトリックスまたはテーブルに追加します。

<html>
<body>
<script type="text/javascript">
function myFunction(imgno)
{
    if(imgno%4==0)
    {
      document.write("</td></tr>");
    }
    else
    {
      document.write("<td><img src=\"" + imgno + ".jpg\"/> </td>");
    }
}
document.write("<table><tr>");

var i=0;
for (i=0;i<=20;i++)
{
    myFunction(i);
}
document.write("</table>");
</script>
</body>
</html>