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容器定位

回答

相關問題