html 2 div容器定位

我创建了一个。在这篇文章中，我想创建2个div。 1格与图像和其他格与文字。我创建了这两个元素。但仍然无法工作。文本应该是不降反升像现在......html 2 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; 
 
\t 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

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

来源

2015-01-09 Skeptar

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

来源

2015-01-09 23:36:40 Royalty

你有两个DIV的彼此相邻，因为它们都是块级元素，他们将出现在每一个顶部其他。

如果你想要把它们并排侧，你可以让他们漂浮，或者使用inline-block的

要使文本坐在箱子的中间，你可以添加填充到箱子或使用行高

来源

2015-01-09 23:36:59 DaveB

html 2 div容器定位

回答

相关问题