Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2013, 13:08
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

display:inline-block по центру горизонтали
есть 4 блока

<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>



.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;     
    display:inline-block; 
    vertical-align:auto;    
    border:3px solid black;  
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;
}


Как выровнять work-box_center-news по центру по горизонтали, при том чтобы высота всех блоков была динамичной?
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2013, 13:17
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

для ie8
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2013, 13:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

text-align: center для родительского блока:

<!DOCTYPE html>
<title></title>
<style>
html{width:1200px;}
.work-box-news {   
    background:#F0F0F0;   
    min-height:800px;   
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;   
    border:3px solid gold;
    text-align: center;
}
 
.work-box_center-news {   
    width: 940px;   
    min-height:800px;   
    padding:20px 0;    
    position:relative;    
    display:inline-block;
    vertical-align:auto;   
    border:3px solid black; 
}
 
 
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;   
    width: 240px;
    min-height: 723px;   
    float:left;   
    border:3px solid green;
}
 
.include-work_area{   
    position: relative;       
    width: 650px;   
    min-height: 500px;
    font-family: PT Sans;
    left:25px;     
    float:left;  
    border:3px solid red;
}

</style>
<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2013, 13:36
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

спасибо большое, теперь он действительно по центру, чтобы все содержимое дочерних блоков было по левому краю немного подредактировал.

.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
    position:relative;  
    
    text-align: center;  
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;      
    display:inline-block;        
    border:3px solid black; 
    text-align: left; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
    position:relative;

    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;

    text-align: left; 
}


НО, left-area-work (зеленый), в ie8, при увеличении высоты уходит за work-box_center-news(черный). Всю голову изломал уже...
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2013, 13:40
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

извиняюсь, я нашел проблему но её не решил, если ручками поменять в css высоту зеленого блока то все нормально. У меня зеленый блок увеличивает высоту jQuery скриптом - Там выподающее вертикальное меню, во всех браузерах кроме ie8 нормально увеличивается высота... в чем может быть проблема ?
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2013, 13:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Слейп
в чем может быть проблема
Может быть в том что вы используете javascript там, где нужно использовать css?

Чем height: auto (это дефолтное значение кстати) не устраивает?
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2013, 14:12
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

Все, сделал так:

<div class="work-box-news">
	    <div class="work-box_center-news">
	        <div class="left-area-work"></div>
	        <div class="include-work_area"></div>
                   <div style="clear: both;"></div>   <!-- ДОБАВИЛ ЭТУ СТРОКУ --!>
	    </div>     
</div>


И все стало отлично работать, спасибо большое что обратили внимание!

Последний раз редактировалось Слейп, 15.02.2013 в 09:58.
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2013, 14:17
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<div style="clear: both;"></div> - прошлый век.
Достаточно родителю задать
display: table;
zoom: 1;

Хотя table не всегда можно применить. А зачем вобще задавать блоку display: inline-block ?

display: block;
heigth: 800px;
margin: 0 auto;


это также отцентрирует блок по горизонтали.
Ответить с цитированием
  #9 (permalink)  
Старый 15.02.2013, 09:57
Интересующийся
Отправить личное сообщение для Слейп Посмотреть профиль Найти все сообщения от Слейп
 
Регистрация: 22.12.2012
Сообщений: 17

Готовый вариант
Готовый вариант:

<div class="work-box-news">
	        <div class="work-box_center-news">
	            <div class="left-area-work"></div>
	            <div class="include-work_area"></div>
                       <div style="clear: both;"></div>
	        </div>
</div>


.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
    text-align: center;  
}

.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    position: relative;
    text-align: left;
    width: 940px; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
    position:relative;
    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;       
    text-align: left; 
}
Ответить с цитированием
  #10 (permalink)  
Старый 15.02.2013, 10:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Слейп
Готовый вариант:
Можно еще "облегчить"...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
}
.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    width: 940px; 
	overflow: hidden;
}
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
}
.include-work_area{    
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    margin-left:25px;      
    float:left;       
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="work-box-news">
	<div class="work-box_center-news">
		<div class="left-area-work">left-area-work</div>
		<div class="include-work_area">include-work_area</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Условие display: block studasd jQuery 1 05.10.2012 08:01
Нужны интузиасты (JS) qwert_ukg Общие вопросы Javascript 5 21.09.2012 13:28
Размещение 2 блоков по центру София Events/DOM/Window 4 12.05.2011 16:29
коррекция кода harek13 jQuery 1 16.12.2010 17:13
Окошко по центру OlegSmirnov Элементы интерфейса 6 01.11.2010 11:14