overflow-x

exessqd1 · February 17, 2011

Я может чего то не понимаю? Я всегда думал что можно прописать overflow-y:visible; overflow-x: hidden; и все выходящие за пределы блока по горизонтали скроется а по вертикали будет видно, оказалось не так, может кто объяснит?

<style>
.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;
overflow-x:hidden;
overflow-y:visible;
}

.in {
height: 500px;
width: 40px;
border: 1px solid red;
}


</style>  

<div class="head"> 
	<div class="in">123</div>
</div>

это выглядит вот так

а должно вот так

help!?

Edited February 17, 2011 by exessqd1

Dinow · February 17, 2011

Я может чего то не понимаю? Я всегда думал что можно прописать overflow-x и все выходящие за пределы блока по горизонтали скроется, оказалось не так, может кто объяснит?

Наверно имелось в виду по вертикали?

это выглядит вот так

ну да.. overflow-x: hidden скрыл все выходящее за пределы блока..

а должно вот так

если убрать этот overflow-x, то так и будет выглядеть..

Либо вы что-то не так написали, либо я не поняла просто о чем речь..

exessqd1 · February 17, 2011

Нужно показать все по вертикали и скрыть по горизонтали

psywalker · February 17, 2011

А чё то я не понял юмора. А вот так нельзя?

<style type="text/css">

.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;

}

.in {
height: 500px;
width: 40px;
border: 1px solid red;
background: red;
}

</style>
</head>

<body>



<div class="head">
	<div class="in">123</div>
</div>

exessqd1 · February 17, 2011

А чё то я не понял юмора. А вот так нельзя?

<style type="text/css">

.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;

}

.in {
height: 500px;
width: 40px;
border: 1px solid red;
background: red;
}

</style>
</head>

<body>



<div class="head">
	<div class="in">123</div>
</div>

Нельзя так как нужно не только показать то что по вертикали но и скрыть все что находится по горизонтали

psywalker · February 17, 2011

Ну так где проблема? Добавь в конец...

.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;
overflow-x: hidden;

}

exessqd1 · February 17, 2011

Ну так где проблема? Добавь в конец...
.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;
overflow-x: hidden;

}

читай внимательно сообщения, в первом посте уже сказано что это не работает, я даже скринтшот выложил! самый первый который.

А лучше сначала проверь все сам прежде чем отвечать...

Edited February 17, 2011 by exessqd1

Dinow · February 17, 2011

Вот так получается в точности как на втором скриншоте:

<style>
.head {
height: 300px;
width: 700px;
margin: 0 auto;
border: 1px solid red;
border-left: none !important;
overflow-y: visible;
}

.in {
height: 500px;
width: 40px;
background: red;
}


</style>  

<div class="head">
	<div class="in">123</div>
</div>

psywalker · February 17, 2011

exessqd1

Задачу нужно объяснять понятнее.

<style type="text/css">
	*{ margin: 0; padding: 0;}
#wrap { 
	width: 300px; 
	height: 200px; 
	position: relative;
	border: 1px solid red; 
}
.head {
height: 300px;
width: 300px;
margin: 0 auto;

position: absolute; left: 0; top: 0;
overflow-x: hidden;
z-index: -1;
}

.in {
height: 500px;
width: 40px;
border: 1px solid red;
background: red;
}

</style>
</head>

<body>



<div id="wrap">
<div class="in">123</div>

<div class="head">
	<div style="width: 400px; height: 20px; background: blue;">sfdsd</div>

</div>
</div>

exessqd1 · February 18, 2011

Спасибо конечно, но это не то что нужно. Нужна четкая вложеность:

<div class="first">
	<div class="second">

	</div>
</div>

Вот наглядная схема то что нужно сделать

<style>

.first {
	margin: 100px auto;
	border: 5px solid #000;
	width: 500px;
	height: 200px;

	overflow-x:hidden;
	overflow-y:visible;
	}

.second {
	width: 600px;
	height: 300px;
	background: lightblue;
	}

</style>


<div class="first">
	<div class="second">

	</div>
</div>

Вот как выглядит:

Вот как нужно сделать чтобы выглядело:

Sign In

overflow-x

Question

exessqd1

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Dinow

Link to comment

Share on other sites

exessqd1

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

exessqd1

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

exessqd1

Link to comment

Share on other sites

Dinow

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

exessqd1

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information