Html CSS：大小调整部分'；将内部元素均匀地分成两部分_Html_Css_Image_Flexbox

Html CSS：大小调整部分'；将内部元素均匀地分成两部分

html css image

Html CSS：大小调整部分'；将内部元素均匀地分成两部分,html,css,image,flexbox,Html,Css,Image,Flexbox,在我的身体里，我有两个部分在一列中相互重叠（所有的弹性体）。它们将具有相同的属性，因此我使用相同的ID。唯一的区别是一个部分将在文本左侧显示图像，另一个部分将在右侧显示图像我有一个图像放在一个div旁边，里面有文本（H2&p）。我希望图像和div均匀地分割截面弹性体的宽度。我试图声明一个图像/div宽度，但它也不会调整大小。有人帮忙吗 HTML: <body>  <section id="splitscreen">

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

我有一个图像放在一个div旁边，里面有文本（H2&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>

首先，您错误地使用了相似的

id

（标识符），它必须是整个文档中的一个。它就像一个人，没有相同的东西，也没有相似的东西。为了表明它们相似，你应该使用

class

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

.splitscreen img{
    width = 30vw;
}

接下来，将文本放在第一个

部分

包装后的

部分

<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>

这里我们取我们所有区块的宽度：700px。接下来，使用

float:left将float文本移到左侧。下一步是给图像一些宽度
，在示例中是200px
。最后一个是边距
，它在图像和文本之间留出了一些自由空间
这是一本书。如果有任何错误，请告诉我。如果你有任何问题，欢迎你

.splitscreen{
宽度：700px；
边缘底部：20px；
}
.左漂{
浮动：左；
宽度：220px；
}
.向左浮动>img{
宽度：200px；
}
.向右浮动{
浮动：对；
宽度：220px；
}
.向右浮动>img{
宽度：200px；
}

第一部分
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
第二部分
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
就像上面提到的那样，ID应该用于唯一的实例。。。只有一个标签。。。用于标记的多个“分组”的类
让我知道这对你有用吗

截图：

//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>

我想我们在这一点上是一致的，你的解释是有道理的。然而，它没有工作，我将编辑问题，并添加一个显示我现在拥有的图像。这里有一个链接到我试图模仿的网站。类似于中间的概念/贴纸部分。我试着检查代码，看看他们做了什么，但没有用。@blackRob4953我更新了答案，请检查！非常感谢。这不是我在这个问题中想要的，但是我接下来会问这个问题（关于让文本环绕图像）。所以谢谢你的解释！这有助于把它钉牢。我玩了大小和利润，得到了我想要的。谢谢大家!@blackRob4953凉爽凉爽。是的，没问题，伙计，下次打我。
<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;
}

<!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>

.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;
}