gpt4 book ai didi

html 2 div容器定位

转载 作者:太空宇宙 更新时间:2023-11-04 12:28:08 25 4
gpt4 key购买 nike

我创建了一个 .在本文中,我想创建 2 个 div。 1 个带有图像的 div,另一个带有文本的 div。我创建了这两个元素。但还是不行。文本应该像现在一样向上而不是向下......

这是我的代码

*{
padding: 0px;
margin: 0px;
font-family: Raleway;
}

body{
background-image: url(images/hintergrund.png);
}

section{
margin-top: 20px;
width: 60%;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);

margin-left: auto;
margin-right: auto;
padding: 20px;
}

article{
width: 100%;
background-color: red;
overflow: hidden;
}

.one{
background-image: url("http://placehold.it/200x200");
height: 200px;
width: 200px;
}

.two{

}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="one">

</div>
<div class="two">
exampleexampleexampleexampleexampleexampleexampleexamplexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaeexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamplempleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample
</div>
</article>
<article>
</article>
</section>
</body>
</html>

这是一个 jsfiddle jsfiddle

如果我写了很长的文字,文字会超出该部分。我该如何解决?

最佳答案

http://jsfiddle.net/76739xw7/4/问题是你的 div .one 没有漂浮在任何地方,所以它的右边没有任何东西。另一个问题是你的 .two 需要一个宽度并且要 float 才能与一个相邻。添加一些填充。一种使单词能够中断的方法是使用 css3s word-wrap 属性,我的代码在这里:

<body>
<section>
<article>
<div class="one">

</div>
<div class="two">
exampleexampleexampleexampleexamplexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaeexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample
</div>
</article>
<article>
</article>
</section>
</body>

*{
padding: 0px;
margin: 0px;
font-family: Raleway;
}

body{
background-image: url(images/hintergrund.png);
}

section{
margin-top: 20px;
width: 60%;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);

margin-left: auto;
margin-right: auto;
padding: 20px;
}

article{
width: 100%;
background-color: red;
overflow: hidden;
}

.one{
background-image: url("http://placehold.it/200x200");
height: 200px;
width: 200px;
float:left;
}

.two{
float:left;
width:40%;
word-wrap: break-word;
box-sizing:border-box;
padding:10px;
}

关于html 2 div容器定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27870950/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com