Jump to content
  • 0

Верстка трех колонок с выравниванием по ширине

Светлана Г.

Asked by Светлана Г.,

 Share

Question

Светлана Г. Explorer

Светлана Г.

Posted
Posted (edited)

Здравствуйте!

Есть такой блок:

 

6551470m.jpg

 

Сверстать нужно адаптивно. Данный вид для ширины 1340px.

 

Обращаю внимание на то, что заголовок выровнен со средней колонкой по левому краю. На крайний случай, для выравнивания заголовка буду использовать это:

#title:before{	content:'Наши услуги:';	display:inline-block;	font-size:30px;}

Я использую стили Bootstrap. Может быть, здесь подойдет что-то вроде .col-lg-offset-* . Я не очень с этим разобралась, поэтому не знаю, как это правильно применить - сколько выбрать колонок, например.

Пробовала использовать flex, но он не кроссбраузерный.

 

Помогите, пожалуйста.

Edited by Светлана Г.
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
kattiperk Explorer

kattiperk

Posted
Posted (edited)

Flex был кроссбаузерный.

А как адаптировать? Чтобы расстояние было резиновым?

Как это сделать в бутстрапе,  так это задать контейнеру class="container-fluid"

Edited by kattiperk
Link to comment
Share on other sites
  • 0
Светлана Г. Explorer

Светлана Г.

Posted
  • Author
Posted

Flex был кроссбаузерный.

А как адаптировать? Чтобы расстояние было резиновым?

Как это сделать в бутстрапе,  так это задать контейнеру class="container-fluid"

Ну чтобы структура сохранялась. Мне надо кроссбраузерно везде. А причем здесь class="container-fluid" ? Он чем может помочь?

Link to comment
Share on other sites
  • 0
Светлана Г. Explorer

Светлана Г.

Posted
  • Author
Posted

Структура сохранится, колонки станут резиновыми.

А можете структуру набросать? Резиновые колонки - это не проблема. Проблема разместить их так, как в макете.

Link to comment
Share on other sites
  • 0
kattiperk Explorer

kattiperk

Posted
Posted 


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ex</title>

        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    </head>

    <body>

        <footer>

            <div class="container-fluid">

                <div class="row">

                    <div class="col-lg-4 col-sm-4 col-xs-4">

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                    </div>

                    <div class="col-lg-4 col-sm-4 col-xs-4">

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                    </div>

                    <div class="col-lg-4 col-sm-4 col-xs-4">

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                        <p>

                            Хирургия

                        </p>

                    </div>

                </div>

            </div>

        </footer>

    </body>

</html>





			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
			
  • 
				
			
    • 
		
	
	




	

	

	

        
        

            

                

                    


	
		Светлана Г.
	

                    
                    
                    
                        
Explorer
                    
                    
                

            

            

                

                    


Светлана Г.
                

                

                    Posted 
                    
                

            

        


		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
					(edited)
				
				
			
		

	


	

    

	

		
		

			

Вот что получилось:
6519745m.png
<div class="container">    <article class="no_padding clearfix" id="services">    <div class="row">    <div class="col-lg-4 col-sm-4 col-xs-4"></div>    	<div class="col-lg-4 col-sm-4 col-xs-4"><h1>Наши услуги:</h1></div>    <div class="col-lg-4 col-sm-4 col-xs-4"></div>    </div>    <div class="row service_col">        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009 my-flex-block">        <li><a href="#">Хирургия</a></li>        <li><a href="#">Терапия</a></li>        <li><a href="#">Ортопедия</a></li>        <li><a href="#">Парадонтология</a></li>    </ul>    </div>        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009">        <li><a href="#">Бюгельный протез</a></li>        <li><a href="#">Нейлоновый протез</a></li>        <li><a href="#">Имплантология</a></li>        <li><a href="#">Ортодонтия</a></li>        <li><a href="#">Художественная реставрация</a></li>    </ul>    </div>        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009">        <li><a href="#">Гигиена и профилактика</a></li>        <li><a href="#">Люминиры</a></li>        <li><a href="#">Украшение для зубов</a></li>        <li><a href="#">Отбеливание зубов</a></li>    </ul>    </div>        </div><!--/.row-->
Текст в правой колонке должен быть прижат к правому краю. Может тут уже использовать -offset ?



			
				


	Edited  by Светлана Г.
	
	

			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
			
  • 
				
			
    • 
		
	
	




	

	

	

        
        

            

                

                    


	
		kattiperk
	

                    
                    
                    
                        
Explorer
                    
                    
                

            

            

                

                    


kattiperk
                

                

                    Posted 
                    
                

            

        


		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	

    

	

		
		

			
Тогда
<div class="col-lg-3 col-sm-3 col-xs-3"></div><div class="col-lg-1 col-sm-1 col-xs-1">    <p>        Хирургия    </p>    <p>        Хирургия    </p>    <p>        Хирургия    </p>    <p>        Хирургия    </p></div>
Или оставить начальный вариант, но сделать padding-left: *%;



			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					






	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
			
  • 
				
			
    • 
		
	
	




	

	

	

        
        

            

                

                    


	
		nonlux
	

                    
                    
                    
                        
Explorer
                    
                    
                

            

            

                

                    


nonlux
                

                

                    Posted 
                    
                

            

        


		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	

    

	

		
		

			
Посмотрите какие свойства у h1
Он случайно не центрует?
Какие значения:
 - text-align
 - margin
 
conteiner-fluid  в вашем случае обязателен.
Вы документацию читали? Если да то подумайте сами чем отличается container  и container-fluid. Можете ваше мнение высказать, поправлю.
 
 
Далее... вы хотите сделать респонсив:
объясните мне  вот это col-xs-4.
Вы побывали  ваше решение посмотреть в xs  разрешении ?

 Посмотрите какие свойства у h1 Он случайно не центрует? Какие значения:  - text-align  - margin 
 
Ой я не о вашем вопросе ),
 
Попробуйте для ul  в правой колонке  добавить класс pull-right



			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				
			
			



		

	


	
	
	
	
	
		
		

			
				
				

	
		

			
Join the conversation

			

	
				
					You can post now and register later.
				
				If you have an account, sign in now to post with your account.
				
					
Note: Your post will require moderator approval before it will be visible.
				
			

	
		

	




	
	
		
	
		
	
		
	
	
		
		
	
	

		


	
		Guest
	


		

			
				
					
				
					
						
    
							
  • 
								



	
	
	
	

								
							
    • 
						

					
				
					
				
			
			
				
					
						
							
						
						


	

		
		

			
		

		
			
 Answer this question...

		
		

			

				
					×
					  Pasted as rich text.   Paste as plain text instead
				
			

		

		

			

				  Only 75 emoji are allowed.
			

		

		

			

				×
				  Your link has been automatically embedded.   Display as a link instead
			

		

		

			

			

		

		

			

				×
				  Your previous content has been restored.   Clear editor
			

		

		

			

				×
				  You cannot paste images directly. Upload or insert images from URL.
			

		

		
	

		
	

	

	

		

			×
			
		

		

	



						
					
				
					
				
					
				
			
			
    
				
					
						
					
						
					
						
							
  • 
								

    
	

    
								
							
    • 
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			
				

					


    
          Share
    

    

        
        
            

            
        
    


				

			
			

				


			

			
		

	







	

		
			
				Go to question listing
			
		
	

	




						


	

		
    
			
				
					
					
  • 
				
			
		

	


					

					


	

		
		
		
		


	

		
    
			
				
					
					
  • 
				
					
					
  • 

	
    Обсуждения
    
	
		
    
			
      
				
					
    • 
						
      
							


	
		Nikker
	

						
      
						
      
							
       Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене
      
							
      By 


Nikker · Posted 
      
							
      
								Актуальные контакты:
 


	Telegram: @Nikker_web
	E-Mail:   tarasevich.email@gmail.com
 


	Портфолио https://www.behance.net/d4d4186e
 


	Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
 


	 
 


	 
 


	
 

							
      
						
      
					
      • 
				
					
    • 
						
      
							


	
		Nikker
	

						
      
						
      
							
       Брендовый дизайн в социальных сетях
      
							
      By 


Nikker · Posted 
      
							
      
								Актуальные контакты:
 


	Telegram: @Nikker_web
	E-Mail:   tarasevich.email@gmail.com
	 
 


	Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
 


	 
 


	Портфолио https://www.behance.net/d4d4186e
 

							
      
						
      
					
      • 
				
					
    • 
						
      
							


	
		Mondeus
	

						
      
						
      
							
       Вёрстка футера на движке Xenforo
      
							
      By 


Mondeus · Posted 
      
							
      
								Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
 

.p-footer
{
	.xf-publicFooter();

	a
	{
		.xf-publicFooterLink();
	}
}

.p-footer-inner
{
	.m-pageWidth();
	.m-pageInset();

	padding-top: @xf-paddingMedium;
	padding-bottom: @xf-paddingLarge;
}

.p-footer-row
{
	.m-clearFix();

	margin-bottom: -@xf-paddingLarge;
}

.p-footer-row-main
{
	float: left;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-row-opposite
{
	float: right;
	margin-bottom: @xf-paddingLarge;
}

.p-footer-linkList
{
	.m-listPlain();
	.m-clearFix();

	> li
	{
		float: left;
		margin-right: .5em;

		&:last-child
		{
			margin-right: 0;
		}

		a
		{
			padding: 2px 4px;
			border-radius: @xf-borderRadiusSmall;

			&:hover
			{
				text-decoration: none;
				background-color: fade(@xf-publicFooterLink--color, 10%);
			}
		}
	}
}

.p-footer-rssLink
{
	> span
	{
		position: relative;
		top: -1px;

		display: inline-block;
		width: 1.44em;
		height: 1.44em;
		line-height: 1.44em;
		text-align: center;
		font-size: .8em;
		background-color: #4682B4;
		border-radius: 2px;
	}

	.fa-rss
	{
		color: white;
	}
}

.p-footer-copyright
{
	margin-top: @xf-elementSpacer;
	text-align: center;
	font-size: @xf-fontSizeSmallest;
}

.p-footer-debug
{
	margin-top: @xf-paddingLarge;
	text-align: right;
	font-size: @xf-fontSizeSmallest;

	.pairs > dt { color: inherit; }
}

@media (max-width: @xf-responsiveMedium)
{
	.p-footer-row-main,
	.p-footer-row-opposite
	{
		float: none;
	}

	.p-footer-copyright
	{
		text-align: left;
		padding: 0 4px; // aligns with other links
	}
}


	 
 

 
							
      
						
      
					
      • 
				
					
    • 
						
      
							


	
		torsar
	

						
      
						
      
							
       Примеры верстки
      
							
      By 


torsar · Posted 
      
							
      
								Нужны сайты с примерами верстки, типа https://css-tricks.com/. 
	 
	Типовые приемы и нестандартные 
	на все случаи жизни. 
	 
	Накидайте ссылок.



	


							
      
						
      
					
      • 
				
					
    • 
						
      
							


	
		Katerina23
	

						
      
						
      
							
       Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
      
							
      By 


Katerina23 · Posted 
      
							
      
								Да, подходит. Спасибо.
 

							
      
						
      
					
      • 
				
			
    
		
    
	


    • 
				
			
		

	


	


					

				

			

			
		

		
			
			



	

		×
		


    
	





			
				

					
				

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	




			







	




	







	

		

			

				
Important Information

				
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

			

			

				  I accept