Question

此处是初学者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分开的点上？

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

欢呼

Answer 1

一种解决方法是使用Flexbox，方法是将id == 102 & amount == 1330添加到容器中。如果您尚未了解flexbox的工作原理，建议您阅读this article。

我已经创建了您想要的迷你原型here。您应该对JSFiddle做两件事，以帮助您更好地理解代码：

在CSS代码的第15行上，将display: flex属性更改为其他值。
使用JavaScript使文本相对于flex-grow

一旦您了解了flexbox，它就会为您提供很多可供选择的选项。

我希望它对您有用。如果没有，请在评论中告诉我。

Answer 2

老实说，根据我从这里可以理解的内容来看，页面的结构不是很牢固。

无论如何，就此而言，如果我达到了您的目标，那么让您的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

希望文字溢出到另一个div

2 个答案: