2016-12-01 5 views
0

Так что ознакомьтесь с страницами «О нас» и «Свяжитесь с нами» here.CSS div container width

У меня возникли трудности с выравниванием контейнеров DIV. Я никогда не использовал контейнеры DIV - в прошлый раз, когда я создал сайт, он был основан на таблицах и использовал Golive!

В любом случае, вопрос должен быть достаточно очевиден - я хочу изображение 250х250 слева со словами справа от изображения и обертыванием ниже него (x3). Весь участок должен быть центрирован в середине страницы с максимальной шириной 1170 пикселей. Я просто не могу понять, где все пошло не так.

Аналогичным образом на странице «Контакты» мои 3 контейнера DIV выровнены по вертикали, а не по экрану, занимая 33%. Все отлично смотрится в режиме просмотра Dreamweaver, но не работает в Chrome после загрузки.

Держу пари, это просто, но я действительно не знаю! Я буду очень благодарен, если кто-то может указать мне в правильном направлении.

+6

Добро пожаловать в Stack Overflow, Оливер! Пожалуйста, найдите время, чтобы прочитать http://stackoverflow.com/help/how-to-ask, а также о составе вашего первого вопроса здесь также http://stackoverflow.com/help/mcve. – connexo

+1

* Вопросы, требующие помощи по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для воспроизведения в самом вопросе. Вопросы без четкого заявления о проблеме не полезны для других читателей. * – connexo

+0

@Oliver проверить мой ответ ниже – Aravind

ответ

1

Проблема здесь в следующей строке HTML

ДИВ, соответствующий авиации & Automotive

<div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10"> 

Заменить весь этот DIV с помощью этого

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10"> 
     <div class="item project-post"> 
      <div class="templatemo_about_box"> 
       <div class="square_coner"> 
        <span class="texts-a"><i class="fa fa-paper-plane"></i></span> 
       </div> 
       Aviation &amp; Automotive 
      </div> 
      <a href="about-us.html"></a><div class="col-xs-6 col-sm-6 col-md-3 hover-box"> 
       <a href="about-us.html"></a> 
       <div class="inner-hover-box"> 
        <p>Repairs, maintenance and add-ons. We specialise in one-off projects.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

enter image description here