Question

我创建了一个。在本文中，我想创建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

如果我写一个长文本，文本将用完该部分。我该如何解决这个问题？

Answer 1

http://jsfiddle.net/76739xw7/4/ 问题是你的div .one没有漂浮在任何地方，所以它没有任何东西。另一个问题是你的.two需要一个宽度并且也要浮动，以便能够紧挨着一个。添加一些填充。使单词能够破解的一种方法是使用css3s自动换行属性，我的代码在这里：

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

Answer 2

你有两个DIV彼此相邻，因为它们都是BLOCK级元素，它们将相互叠加。

如果你想并排放置它们可以使它们浮动，或使用内联块

要使文字位于框的中间，您可以在框中添加填充或使用行高

html 2 div容器定位

2 个答案: