Question

我希望第一个div在左边有一张图片，在右边有文字。在第二个div上，我想要左边的文字和右边的图片。

这是我最好的做法吗？

这是我的jsfiddle：http://jsfiddle.net/huskydawgs/g8mbgr1e/13/

这是我的代码：

    <div class="wrapper-20-80">
    <div class="left-20-80">
    <p><img alt="Pear" src="http://eofdreams.com/data_images/dreams/pear/pear-01.jpg" width="144" height="150" /></p>
</div>
    <div class="right-20-80">
<p>
   The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 metres (33–56 ft) tall, often with a tall, narrow crown; a few species are shrubby. The fruit is composed of the receptacle or upper end of the flower-stalk (the so-called calyx tube) greatly dilated. Enclosed within its cellular flesh is the true fruit: five cartilaginous carpels, known colloquially as the "core". From the upper rim of the receptacle are given off the five sepals[vague], the five petals, and the very numerous stamens.</p>
    </div>
</div>
<div class="wrapper-20-80">
    <div class="left-80-20">
        <p>
   In ancient Egypt, artists used an orange mineral pigment called realgar for tomb paintings, as well as other uses. It was also used later by Medieval artists for the colouring of manuscripts. Pigments were also made in ancient times from a mineral known as orpiment. Orpiment was an important item of trade in the Roman Empire and was used as a medicine in China although it contains arsenic and is highly toxic. It was also used as a fly poison and to poison arrows.</p>
</div>
    <div class="right-80-20">
    <p><img alt="Orange" src="http://wallwallhd.com/wp-content/uploads/2014/06/orange-slice-wide-wallpaper.jpg" width="144" height="150" /></p>
    </div>
</div>

Here's my CSS:

    .wrapper-20-80 {

    overflow: hidden;
    width: 100%;
}

    .left-20-80 {
        width: 20%;
        float: left;
    }

    .right-20-80 {
        width: 80%;
        float: right;
    }

    .left-80-20 {
        width: 80%;
        float: left;
    }

    .right-80-20 {
        width: 20%;
        float: right;
    }

Answer 1

我认为你想要的是这样的：http://jsfiddle.net/2fay9p0b/

基本上我把每张照片和它的相应文字都用一个div清除了两边的浮动：

.clear{
    clear: both;
}

Answer 2

标记（您的HTML）应代表结构，而不是演示文稿。

您的内容是一系列内容;列出的每个东西都包含图像和文本描述，因此您的基本结构应该是：

<ul>
    <li>
        <div>(image)</div>
        <div>(text)</div>
    </li>
</ul>

应该命名元素上的类（并在CSS中使用）以区分的内容，而不是您希望它的外观。填写以上内容以更好地指定这些部分可能会导致：

<ul class="entries">
    <li>
        <div class="itemimage">(image)</div>
        <div class="itemtext">(text)</div>
    </li>
</ul>

现在您决定要让图像左右交替显示。这是演示文稿决定，应该在CSS中处理。在现实世界中，您可能偶尔需要添加额外的标记，但如果可能，您应该避免使用。

在这种情况下，可以在没有额外标记的情况下设置样式。

ul {
    list-style-type: none;
}
ul li {
    clear: both;
}
ul li:nth-of-type(2n+1) div.itemimage {
    float: left;
    margin: 0px 30px 20px 0px;
}
ul li:nth-of-type(2n) div.itemimage {
    float: right;
    margin: 0px 0px 20px 30px;
}

首先删除列表项目符号，然后确保每个列表项都启动一个新块（因为我们使用了浮点数）

接下来对奇数（2n + 1）和偶数（2n）列表项进行不同的设置 - 将图像浮动在左边一个，另一个放在右边。实际存在的图像可能不需要边距，或者无论如何你可能想要它们。

请参阅此updated fiddle进行演示。

Answer 3

我的方法结合了user145400和Stephen P的答案。我不同意斯蒂芬说表示应该在语义上反映在列表中，我对user145400的 clearfix 做了一个小调整。我还以为他使用了太多的div和包裹元素。

您所做的就是使用HTML 5 article。实际上，它说明了一切。每个水果都有自己的小空间，有一个包裹article元素（自我清除它的孩子），一个缩略图，一个很好的标题（我强烈推荐这个，主要是为了SEO目的）和文本本身。

看起来像这样：

<article>
  <img src="" alt="">
  <h2>Bananas</h2>
  <p>Lorem ipsum</p>
</article>

通过这种方式，您可以非常具体地单独编写每个项目，而不会超载div。好又简单是关键。

在小提琴中我添加了一些类，因为您的网页上可能有其他图像和文章。通过添加这些类，您可以轻松识别元素。斯蒂芬P说的是你应该把它们命名为它们的样子而不是它们的样子。它使生活变得如此简单，因为你立即知道“水果形象”是指什么。

你可以找到最后的小提琴here。示例文章：

<article class="clear fruit-entry">
  <img alt="Pear" src="http://upload.wikimedia.org/wikipedia/commons/6/61/Alexander_Lucas_10.10.10.jpg" class="fruit-image">
  <h2>Pear</h2>
  <p>The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 metres (33–56 ft) tall, often with a tall, narrow crown; a few species are shrubby. The fruit is composed of the receptacle or upper end of the flower-stalk (the so-called calyx tube) greatly dilated. Enclosed within its cellular flesh is the true fruit: five cartilaginous carpels, known colloquially as the "core". From the upper rim of the receptacle are given off the five sepals[vague], the five petals, and the very numerous stamens.</p>
</article>

重要的CSS：

article.fruit-entry:nth-child(2n) > img.fruit-image {
    float: right;
    margin: 0 0 1em 1em;
}
article.fruit-entry:nth-child(2n+1) > img.fruit-image {
    float: left;
    margin: 0 1em 1em 0;
}
/* Clearfix as per http://css-tricks.com/snippets/css/clear-fix/ */
.clear:after {
    content:"";
    display: table;
    clear: both;
}

Answer 4

你在评论中说你希望它像桌子一样？为什么不把它变成一张桌子。这样的事可能吗？

<table>
    <thead>
        <tr>
            <td><img alt="Pear" src="http://eofdreams.com/data_images/dreams/pear/pear-01.jpg" width="144" height="150" /></td>
            <td><img alt="Orange" src="http://wallwallhd.com/wp-content/uploads/2014/06/orange-slice-wide-wallpaper.jpg" width="144" height="150" /></td>
            <td><img alt="Pineapple" src="http://eofdreams.com/data_images/dreams/pineapple/pineapple-02.jpg" width="144" height="150" /></td>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 metres (33–56 ft) tall, often with a tall, narrow crown; a few species are shrubby. The fruit is composed of the receptacle or upper end of the flower-stalk (the so-called calyx tube) greatly dilated. Enclosed within its cellular flesh is the true fruit: five cartilaginous carpels, known colloquially as the "core". From the upper rim of the receptacle are given off the five sepals[vague], the five petals, and the very numerous stamens.</td>
            <td>In ancient Egypt, artists used an orange mineral pigment called realgar for tomb paintings, as well as other uses. It was also used later by Medieval artists for the colouring of manuscripts. Pigments were also made in ancient times from a mineral known as orpiment. Orpiment was an important item of trade in the Roman Empire and was used as a medicine in China although it contains arsenic and is highly toxic. It was also used as a fly poison and to poison arrows. Because of its yellow-orange colour, it was also a favourite with alchemists searching for a way to make gold, both in China and the West.</td>
            <td>The pineapple is a herbaceous perennial which grows to 1.0 to 1.5 meters (3.3 to 4.9 ft) tall, although sometimes it can be taller. In appearance, the plant itself has a short, stocky stem with tough, waxy leaves. When creating its fruit, it usually produces up to 200 flowers, although some large-fruited cultivars can exceed this. Once it flowers, the individual fruits of the flowers join together to create what is commonly referred to as a pineapple. After the first fruit is produced, side shoots (called 'suckers' by commercial growers) are produced in the leaf axils of the main stem. These may be removed for propagation, or left to produce additional fruits on the original plant.[4] Commercially, suckers that appear around the base are cultivated. It has 30 or more long, narrow, fleshy, trough-shaped leaves with sharp spines along the margins that are 30 to 100 centimeters (1.0 to 3.3 ft) long, surrounding a thick stem. In the first year of growth, the axis lengthens and thickens, bearing numerous leaves in close spirals. After 12 to 20 months, the stem grows into a spike-like inflorescence up to 15 cm (6 in) long with over 100 spirally arranged, trimerous flowers, each subtended by a bract. Flower colors vary, depending on variety, from lavender, through light purple to red.</td>
        </tr>
    </tbody>
</table>

这是设置我的div的最佳做法吗？

4 个答案: