text-align：justify和images

时间：2009-09-23 09:29:14

标签： css

我有一个图像列表（不在列表中，但可能是可以解决问题），我想填充div的整个宽度。我已经尝试了底部的代码，虽然它确实证明了p标签中的任何文本，但它对图像没有做同样的事情。如何让它在div的整个宽度上均匀分布图像？

<div>
  <p>
    <img src="image1.png" alt="foo" />
    <img src="image2.png" alt="foo" />
    <img src="image3.png" alt="foo" />
    <img src="image4.png" alt="foo" />
    <img src="image5.png" alt="foo" />
  </p>
</div>

我的CSS：

div { width: 30em; }
p { text-align: justify; }

7 个答案:

答案 0 :(得分：18)

最简单的方法是：

<style>
    .justify-image{ text-align: justify;}
    .justify-image img{display:inline-block;}
    .justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}
</style>

<p class="justify-image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
</p>
  1. 您需要一个容器，其中 text-align：justify; ，在这种情况下为段落。
  2. 您的图片需要显示：inline-block; 否则他们不会互动为＆＃34; text＆＃34; （在证明文本最后一行不受影响的情况下，您需要添加一行才能使其有效）
  3. 您需要一行＆＃34; text＆＃34;在你的图片下为了证明申请，使用伪元素你可以通过创建* ：
    4. 轻松实现

    *：之后： 不要忘记内容：＆＃34;＆＃34 ;;没有它它不会出现。在我的例子中，我使用了内联块，宽度为100％。它总是会在我的段落中的内容之后断开。

    快乐的编码！ ：）

答案 1 :(得分：4)

因为在之前的答案中没有人提及。现在（2017年）和前一段时间，你可以使用CSS3 flexbox，通过应用属性justify-content:space-between 

div {
  display: flex;
  justify-content: space-between
}
<div>
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
</div>

答案 2 :(得分：3)

图像以内嵌方式显示，因此您也可以使用text-align：justify css属性将图像与css对齐。正如其他人所说，如果你想证明最后一行的合理性，你必须插入一些占据图像列表末尾全宽的排序或空白图像。

请参阅http://fiddle.jshell.net/ewv6K/show/ 

<!DOCTYPE html>
<title>
    Justified Images example
</title>
<style>
    body {
        text-align:center;
    }
    #container {
        width:800px;
        text-align:justify;
        margin-left:auto;
        margin-right:auto;
    }
    #force {
        width:100%;
        height:0px;
    }
</style>
<div id="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <!-- Force the last row to be justifed - use a blank image here, not a real one like I have -->
    <img id="force" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="end">
</div>​

答案 3 :(得分：2)

在对齐文本中，段落中的最后一行文本未展开以填充整个宽度。因此，要使内嵌图像展开，您需要足够的内容将段落拉出两行或更多行，例如：

<div>
    <p>
        <img src="image1.png" alt="foo" />
        <img src="image2.png" alt="foo" />
        <img src="image3.png" alt="foo" />
        <img src="image4.png" alt="foo" />
        <img src="image5.png" alt="foo" />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
</div>

（或其他一些同样丑陋但不太明显的版本涉及&nbsp;。）这是一个讨厌的黑客攻击。

答案 4 :(得分：2)

我意识到这已经过时，但我想我会添加一个简单的解决方案 text-align: justify仅在有多行时才有效（如果在文本段落上使用此行，则会看到最后一行不合理）。这个小jQuery扩展将为你想要证明的元素添加一个不可见的元素，因此，你的图像将被均匀地传播：

$.fn.justify = function() {
 $(this).css("text-align", "justify");
 $(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>");
}

然后您需要做的就是致电：

$("#your-element").justify();

答案 5 :(得分：0)

这个javascript会将图片从中间和边缘传播到div：

var container = document.getElementById("imageContainer");
var imageList = container.getElementsByTagName("img");

var totalWidth = container.offsetWidth;
var sliceWidth = totalWidth/imageList.length;

for( i = 0; i < imageList.length; i++)
{
  var totalMargin = sliceWidth - imageList[i].offsetWidth;
  var margin =  totalMargin / 2;

  imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px"
}

该脚本有很多内容;

  1. 必须有div的ID（imageContainer）
  2. 所有图片必须具有相同的宽度
  3. 为了我的方便，我只在IE7中测试过，有些东西我不太确定，比如“offsetWidth”在Firefox等可能会有所不同，但这主要是为了让你得到剧本的概念。 / LI>

    您当然可以添加对可变图像宽度等的支持，但这并不属于此范围。

    如果添加或删除图像，此脚本将均匀分布图像。如果图像的总宽度大于div的宽度，则会有包装。

    希望它有所帮助！

答案 6 :(得分：0)

    <!-- not elegant -->
    <div style="color:backgroundcolor">
      <p>
       <img src="image1.png" alt="foo" 
       /><em>.</em>
       <img src="image2.png" alt="foo"
       /><em>.</em>
       <img src="image3.png" alt="foo"
       /><em>.</em>
       <img src="image4.png" alt="foo"
       /><em>.</em>
       <img src="image5.png" alt="foo" />
      </p>
     </div>

    My CSS:

    div { width: 30em; }
    p { text-align: justify; }
相关问题
最新问题