2015-03-30 2 views
0

Ive просмотрел предыдущие подобные вопросы, и никто, кажется, не получил мне результат, который мне нужен.Как предотвратить плавающий div от "drop down"?

Это расположение Im пытается сделать ...

layout

Вопрос находится в разделе, который говорит Origins и имеет изображение.

Существует один содержащий div, который содержит 2 дочерних div. Один ребенок плавал слева с текстом, а один - с изображением.

Когда вы масштабируете окно, я хочу, чтобы divs тоже масштабировались.

Проблема заключается в том, что при масштабировании окна до определенной точки правый ребенок падает ниже левого ребенка.

Я попытался сделать отображение ребенка: встроенный блок и переполнение контейнера: скрыто; white-space: nowrap, но затем текст в параграфах выходит за пределы всего макета.

Вот код ...

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

     body{ 
      margin: 0; 
      padding: 0; 
      background-color: yellow; 
     } 

     #container{ 
      width: 100%; 
      background-color: blue; 
     } 

     #main_content_container{ 
      padding: 0px 20px 40px 20px; 
      margin: 0px auto; 
      max-width: 1090px; 
      background-color: white; 
      overflow: auto; 
     } 

     #main_content_left_col{ 
      width: 65.1%; 
      margin: 0px 10px 0px 0px; 
      float: left; 
     } 

     #main_content_right_col{ 
      width: 33%; 
      margin: 0px 0px 0px 10px; 
      float: right; 
     } 

     #history_pic{ 
      width: 100%; 
      margin: 10px auto 0px auto; 
     }    

     p{ 
      padding: 0px; 
      margin: 0px 0px 10px 0px; 
      font-family: 'Roboto', serif; font-weight: 300; 
      color: black; 
      font-size: 16px; 
      text-align: justify; 

    </style> 

</head> 

<body> 

    <div id="container"> 

     <div id="main_content_container"> 

      <div id="main_content_left_col"> 

       <h1>ORIGINS</h1> 

       <h2>A look at the history of wave sliding</h2> 

       <p>The riding of waves has likely existed since humans began swimming in the ocean. In this sense, bodysurfing is the oldest type of wave-catching. Standing up on what is now called a surfboard is a relatively recent innovation developed by the Polynesians. The influences for modern surfing can be directly traced to the surfers of pre-contact Hawaii.</p> 

       <p>The art of surfing, called he'enalu in the Hawaiian language, was first described in 1769 by Joseph Banks on the HMS Endeavour during the third voyage of Captain James Cook. Surfing was a central part of ancient Polynesian culture and predates European contact. The chief (Ali'i) was the most skilled wave rider in the community with the best board made from the best tree. The ruling class had the best beaches and the best boards, and the commoners were not allowed on the same beaches, but they could gain prestige by their ability to ride the surf on their ratchet boards.</p> 

       <p>The sport was also recorded in print by other European residents and visitors who wrote about and photographed Samoans surfing on planks and single canoe hulls; Samoans referred to surf riding as fa'ase'e or se'egalu. Edward Treager also confirmed Samoan terminology for surfing and surfboards in Samoa. Oral tradition confirms that surfing was also practiced in Tonga, where the late king Taufa'ahau Tupou IV was the foremost Tongan surfer of his time.</p> 

      </div> 

      <div id="main_content_right_col"> 

       <img id="history_pic" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/history_pic_zpsmy5pfaet.jpg" /> 

      </div> 

     </div> 

    </div> 

</body> 

</html> 
+0

Вы можете попробовать удалить 'float', если вы также рассматривают возможность использования' инлайн-block', имеющие как подарок, как правило, нет необходимости! Попытайтесь правильно настроить макет без поплавков. –

+0

Я сделал это. Затем текст вытекла из контейнера и со страницы. – Arsinek

+0

Проблема в том, что вы должны установить все внутренние теги внутри двух свойств свойства div: relative; –

ответ

1

Да, встроенный блок может быть в хорошей форме. Но есть несколько вещей, вам нужно будет изменить маржу на отступы и добавить размер окна: border-box; чтобы общая ширина не превышала контейнер.

Должно быть max-width: 100%; а не ширина: 100%; Также читайте комментарии внутри кода CSS.

DEMO:http://jsfiddle.net/5Lad2psj/

body { 
    margin: 0; 
    padding: 0; 
    background-color: yellow; 
} 
#container { 
    width: 100%; 
    background-color: blue; 
} 
#main_content_container { 
    padding: 0px 20px 40px 20px; 
    margin: 0px auto; 
    max-width: 1090px; 
    background-color: white; 
    /* overflow: auto; */ 
    /* font-size: 0; */ /*enable this if necessary - to fix spacing issue*/ 
} 
#main_content_left_col { 
    width: 65.1%; 
    /* margin: 0px 10px 0px 0px; */ 
    /* float: left; */ 
    padding: 0px 10px 0px 0px; 
    display: inline-block; 
    box-sizing: border-box; 
    vertical-align: top; 
    /* font-size: 16px; */ /*if it's set to 0 on the parent, you'll need this*/ 
} 
#main_content_right_col { 
    width: 33%; 
    /* margin: 0px 0px 0px 10px; */ 
    /* float: right; */ 
    padding: 0px 0px 0px 10px; 
    display: inline-block; 
    box-sizing: border-box; 
    vertical-align: top; 
    /* font-size: 16px; */ /*if it's set to 0 on the parent, you'll need this*/ 
} 
#history_pic { 
    /* width: 100%; */ 
    margin: 10px auto 0px auto; 
    max-width: 100%; 
    height: auto; 
} 
p { 
    padding: 0px; 
    margin: 0px 0px 10px 0px; 
    font-family:'Roboto', serif; 
    font-weight: 300; 
    color: black; 
    font-size: 16px; 
    text-align: justify; 
} 
+0

Спасибо, чувак, это сделал трюк. Неужели мы не должны благодарить? Кажется странным. Также, говоря: «Спасибо, что сработало», похоже, что это может быть полезной информацией, потому что она проверяет отклик. – Arsinek

-5

Может быть, вы должны попробовать использовать таблицу вместо DIVs. Это похоже на экземпляр, где он будет намного эффективнее.

+1

Таблицы для табличных данных. – Scott

+0

Таблицы обычно используются для данных. – dowomenfart

0

Вы должны использовать блоки Bootstrap. Псевдокод является:

<div class="container"> 
    <div class="inner-content"> 
    <div class="row"> 

     <div class="span8"> 
      .... 
      .....//the text content goes in here. 
     </div 

     <div class="span4"> 
      //div class for the image 
     </div> 

     </div> 
    </div> 
    </div> 

Здесь вы разделите блок DIV на две части, из которых текста область получает 8 частей из 12 частей, а остальные идет к изображению т.е. 4 частей.

CSS-для них следующие (упаковывают вы не имеете его):

.container { padding: 0 15px !important;} 

.inner_content { padding:25px 0 0 0;text-align:left;} 

.span8 { 
    width: 770px; 
    } 
.span4 { 
    width: 370px; 
    } 

@media (min-width: 1200px) { 
    .row { 
    margin-left: -30px; 
    *zoom: 1; 
    } 
+0

Я много слышал термин bootstrap, но ничего не знаю об этом. Это что-то, что все браузеры изначально поддерживают или это какой-то плагин или что? – Arsinek

+0

это набор классов CSS и JS, которые сотрудники Twitter сделали для веб-разработчиков, которым приходится беспокоиться о заднем конце, чем беспокоиться о лицевой части. Посетите сайт www.getbootstrap.com/css для получения дополнительной информации об этом! –

0

Попробуйте следующие изменения. Это будет работать для вас

 #main_content_left_col{ 
     width: 62.1%; 
     margin: 0px 10px 0px 0px; 
     float: left; 
     display: inline-block; 
    } 

    #main_content_right_col{ 
     width: 33%; 
     //margin: 0px 0px 0px 10px; 
     //float: right; 
     display: inline-block; 
    }