时间戳

首页 > 解决方案 > 希望文本溢出到另一个 div

html - 希望文本溢出到另一个 div

问题描述

初学者 CSS 问题在这里。

我有一个我正在开发的网站的主页非常完美。我有两个`div

#desktop-navbar {
	   text-transform: uppercase;
	   width: 100%;
	   height: 90px;
	   position: fixed;
	   z-index:1;
}

#desktop-nav-wrapper {
	height: inherit;
	padding: 0 45px;
}

#desktop-nav-wrapper nav ul {
	float: right;
	padding-top: 35px;
	font-size: 16px;
}

#desktop-nav-wrapper nav li {
	position: relative;
	display: inline-block;
	padding-left: 25px;
	color: #000000;
	font-family: Thasadith;
	font-weight: 700;
}

#desktop-navbar #mobile-menu-link{
	display: none;
}

#desktop-nav-wrapper nav li:hover {
	font-weight: 900;
}

#desktop-nav-wrapper.solid {
  	transition: background-color 1s ease 0s;
  	background-color: #eeeeee;
}

#desktop-logo.solid-fonts {
  	transition: color 1s ease 0s;
  	background: linear-gradient(90deg, #000 100%,  #000 0%) fixed;
  	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#desktop-nav-wrapper nav li.solid-fonts {
  transition: color 1s ease 0s;
  color: #000000;
}

#desktop-nav-wrapper {
	font-weight: bold;
	font-size: 18vw;
	text-transform: uppercase;
	color: black;
	letter-spacing: 2px;
}

#home {
	height: 700px;
    position: relative;
}

#home-container {
	height: inherit;
	width: 100%;
	display: flex;
	position: absolute;
}

#home-colour-one {
	height: inherit;
	width: 33%;
	background-color: #314455;
}

#home-colour-two {
	height: inherit;
	width: 67%;
	background-color: #dddddd;
}
<div id="desktop-navbar">
		<div id="desktop-nav-wrapper">
		    <nav>
		        <ul id = "desktop-nav-content">
		            <li class="desktop-items"><a href="#home">Casa</a></li>
		            <li class="desktop-items"><a href="#about">Sobre Mi</a></li>
		            <li class="desktop-items"><a href="#services">Servicio</a></li>
		            <li class="desktop-items"><a href="#gallery">Galería</a></li>
		            <li class="desktop-items"><a href="#contact">Contacto</a></li>
		            <li id="mobile-menu-link"><a>Menu</a></li>
		        </ul>
		    </nav>
	    </div>
	</div>

<div id="home">  
 			<div id="home-container">
				<div id="home-colour-one">
					<h3>Bettoo Kaozink</h3>
				</div>
				<div id="home-colour-two" class="container">
					
				</div>
			</div>
		</div>

并排使用不同的颜色（我知道我可以使用一种div并使用 CSS 渐变方法，但我想divs稍后为这两种颜色添加一些甜美的淡入）。

但我想将文本放在两者之间的中间点divs（所以一半是蓝色的，另一半是灰色的）。

现在，我只有一个div主页 ( home-colour-one) 中的文本，但我希望它分布在两个主页中。有没有办法让文本溢出到灰色div（home-colour-two）？或者只是将文本放在一个单独的 div 中并放在将两者分开的点上divs？

我也知道我可以H3在导航栏中使用 Bettoo Kaozink，但这是我想避免的。理想情况下，我希望 Bettoo Kaozink 在容器中垂直居中。

干杯

标签： htmlcss

解决方案

老实说，根据我从这里可以理解的内容，您的页面结构并不是那么可靠。

无论如何，就在这种情况下，如果我的目标正确，那么让您的 h3（或您将添加的任何文本容器）在两个 div [id="home-colour-one" 和 id="home- colour-two"]，并垂直居中，解决方案是将此广告添加到 CSS 的末尾：

/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}

这里是一个 JS Bin：https ://jsbin.com/ralicul/edit?html,css,output

推荐阅读