html 2 위치 컨테이너 위치

a를 만들었습니다. 이 기사에서는 2 개의 div를 만들고 싶습니다. 이미지가있는 div와 텍스트가있는 div. 나는이 두 요소를 만들었습니다. 그러나 여전히 작동하지 않습니다. 텍스트는 html 2 위치 컨테이너 위치

여기 여기 내 코드

*{ 
 
    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이 아무 것도 떠 다니지 않아 문제가되지 않는다는 것입니다. 또 다른 문제는 너의. 두가 너비가 필요하고 옆에있을 수 있도록 또한 떠 있어야한다는 것입니다. 일부 패딩을 추가하십시오. 그들은 모두 블록 수준 요소는 다음과 같이 두 개의 DIV 서로의 옆에, 그들은 서로의 상단에 나타납니다 한

<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

: 깰 단어 수 있도록 할 수있는 방법이 여기에 내 코드, css3s 줄 바꿈 속성입니다 다른. 당신이 그들에게 나란히 넣어하려는 경우

당신은 그들을 플로트 만들거나 텍스트 당신이 상자 또는 사용에 패딩을 추가 할 수있는 상자의 중간에 앉아하려면 인라인 블록

을 사용할 수 있습니다 선로 높이

출처

2015-01-09 23:36:59 DaveB

html 2 위치 컨테이너 위치

답변

관련 문제