Question

在我体内，我在一个列中有两个部分（所有弹性框）。它们具有相同的属性，因此我使用相同的ID。唯一的区别是一个部分将显示图像左侧的文本，另一个部分将右侧显示图像。

我有一个图像放在div旁边，文本在里面（H2＆amp; p）。我希望图像和div能够均匀地分割柔性框宽度。我尝试声明图像/ div宽度，但它也不会调整大小。这里有什么帮助吗？

HTML：

<body>
    <!--Part 5-->
    <section id="splitscreen">
        <img src="/Images/white-hat.jpg"/>
        <section>
            <div>
                <h2>Part 1</h2>
                <p>some other text</p>
            </div>
        </section>
    </section>

<!--Part 6-->
    <section id="splitscreen">
        <section>
            <div>
                <h2>Part 2</h2>
                <p>More Text</p>
            </div>
        </section>
        <img src="/Images/guaranteedseal.png"/>
    </section>
</body>

CSS：

/*=====Part 5/6=====*/

#splitscreen{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    margin: 25px 0px;
    width: 100%;
    min-height: 5vh;
}

#splitscreen img{
    width = 30vw;
}

What I Have Now. Refer to http:www.graphicdisorder.com sections Concepts/Stickers. I'm attempting to mimic this layout

Answer 1

就像上面提到的那样，ID应该被用于唯一的实例......只有一个标签......用于多个＆＃34;分组＆＃34;标签。

如果这适合您，请告诉我？

Here is the JSFiddle Demo

截图：

// HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script>
</script>
</head>
<body>
    <section class="container">
        <img src="http://static1.squarespace.com/static/5374c22ee4b0297decd522a5/t/537dcd58e4b007df5118ebf1/1400753542400/1.jpg?format=500w"/>
        <div class="txt">
            <h2>Part 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
    </section>
    <section class="container">
        <div class="txt">
            <h2>Part 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
        <img src="http://static1.squarespace.com/static/5374c22ee4b0297decd522a5/t/55785b78e4b06b397737c826/1433951097309/?format=500w"/>
    </section>
</body>
</html>

// CSS

.container{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;
}
.txt{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    text-align: center;

    -webkit-align-self: center;
    align-self: center;

    max-width: 200px;

}
img{
    margin: 0 15px;
}

Answer 2

首先，你错误地使用了类似的id（标识符），它必须只是整个文档中的一个。它就像一个人，没有相同的东西，它们看起来像是相似的，这表明它们是相似的，你应该使用class。

<section class="splitscreen">
</section>

.splitscreen img{
    width = 30vw;
}

您的问题如何，您需要使用float。我将解释“左图”的例子。

首先，创建由另一个包装的<section>并输入内部包装器图像，如下所示：

<section class="splitscreen">
    <section class="floated-left">
         <img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"/>
    </section>
</section>

接下来，在包裹section

后，将文字放在第一个section内

<section class="splitscreen">
    <section class="floated-left"><img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"/></section>
    <h2>Part 1</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

让我们设计风格吧！

.splitscreen {
    width: 700px;
    margin-bottom: 20px;
}

.floated-left {
    float: left;
    width: 220px;
}

.floated-left > img {
    width: 200px;
}

这里我们采用所有块的宽度：700px。接下来，使用float: left;将文本浮动到左侧。接下来是给图像一些width，例如200px。最后一个是margin，它在图像和文本之间留出了一些空间。

这是demo。如果有任何错误，请告诉我。如果您有任何疑问，欢迎您！

.splitscreen {
    width: 700px;
    margin-bottom: 20px;
}

.floated-left {
    float: left;
    width: 220px;
}

.floated-left > img {
    width: 200px;
}

.floated-right {
    float: right;
    width: 220px;
}

.floated-right > img {
    width: 200px;
}

<section class="splitscreen">
    <section class="floated-left"><img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"/></section>
    <h2>Part 1</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section class="splitscreen">
    <section class="floated-right"><img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"/></section>
    <h2>Part 2</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

CSS：将两个内部元素的大小均匀分配

2 个答案: