html 2 контейнера для контейнеров

Я создал a. В этой статье я хочу создать 2 div. 1 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 не плавает нигде, так что ничего не будет справа от него. Другая проблема заключается в том, что ваша .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-х рядом друг с другом, так как они оба являются блочные элементы уровня они будут появляться в верхней части каждого Другие.

Если вы хотите, чтобы положить их бок о бок вы можете сделать их Float, или использовать встроенный блок

Чтобы текст сидеть в середине окна вы можете добавить отступы к коробке или использования line-height

источник

2015-01-09 23:36:59 DaveB

html 2 контейнера для контейнеров

ответ

Смежные вопросы