-1

一整天，我已经阅读了关于垂直文本主题的所有内容，对于我的生活，我找不到解决我认为应该非常容易做的事情的方法。我有一个标题。在其中，有三个项目必须并排水平排列。首先是一张图片，第二张可以是任何东西，但它的尺寸必须是 20 X 150 (WxH)（或适合该尺寸），然后是另一张图片。这是我所拥有的：

    #maincontainer{
    width: 1020px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    height: 150px; /*Height of top section*/
    float: left;
    }

    #box{
    	width: 20px;
    	height: 150px;
    	border: 1px solid red;
    }

    .verticaltext{
        font-size: 0.600em;
    	text-align: center;    
        border: 1px solid red;
        transform: rotate(-90deg) translate(-100%, 0);
        transform-origin: 0 0;
    }
	<body>
		<div id="maincontainer">
			<div id="header">
				<div>
					<img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
					<div id="box">
						<p class="verticaltext">vertical text</p>						
    				</div>
    				<img src="image/right_picture.jpg"     alt="right_pic" height=150 width=748>					
    			</div>
    	    </div>
        </div>
    </body>

这应该在标题容器中并排生成三个简单的项目。现在它到处都是——甚至不在同一条线上！（我不需要红色框，但它在那里让我知道我离我真正需要的东西有多远 - 第二张图片设置为 748 以说明该边界）。我很困惑，这么看似容易做的事情，却很难做到。无论如何都可以解决我？

4

5 回答 5

1 

    #maincontainer{

    width: 1020px; /*Width of main container*/
    height: 700px;
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    width: 1000px;
    min-height: 150px; /*Height of top section*/
    float: left;
    }

    .box{
    	width: 250px;
    	height: 150px;
    	border: 1px solid red;
        float:left;
        margin-left:10x;
    }

    .verticaltext{
        font-size: 16px;
        float:left;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align:middle;
        line-height:150px;
        transform:rotate(270deg);
    }
	<body>
		<div id="maincontainer">
			<div id="header">
				<div class="box">
				   <img src="image/left_pic.jpg" alt="left_pic" height="150px" width="250px" />
				</div>	
				<div class="verticaltext">
					Vertical text	
    			</div>
    			<div class="box">
                   <img src="image/right_picture.jpg" alt="right_pic" height="150px" width="748px">						
    			</div>
    	    </div>
        </div>
    </body>

你的代码中有很多错误，我认为这就是你想要的正确吗？如果是这样，请告诉我并解释您遇到的所有错误

于 2016-12-03T05:43:28.300 回答
0

你的css代码可能是这样的

    #header img.img-left {
    position: absolute;
    float: left;
    top:0;
}

#box p {
    position: absolute;
    left: 25%;
}


#header img.img-right {
    position: absolute;
    right: 0;
    top: 0;
}
于 2016-12-03T03:39:49.493 回答
0

好的。我知道这必须很容易做到，但我想我只需要冷静下来，发泄沮丧并考虑清楚。所以，这里适合那些可能有同样问题的人。我按照它在 html 中出现的顺序将所有内容浮动到左侧（最简单的情况）。为了解决对齐问题，我需要一个 position:relative 在标题容器上（因为页面在视口上居中）。竖排文字见verticaltext class的css和verticaltext id——高度和宽度互换了。不知何故，两组维度都是必需的。line-height 等于宽度将确保它居中。white-space:nowrap 也很重要（当然要确保你的文本适合你的空间）。

这是修改后的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="maincontainer">
        <div id="header">               
            <div>
                <img src="image/left_pic.jpg" alt="left_pic" height=150 width=260>
            </div>
            <div id="verticaltext">                 
                <p class="verticaltext">vertical text</p>
            </div>              
            <div>
                <img src="image/right_pic.jpg" alt="right_pic" height=150 width=740>
            </div>
        </div>
    </div>
</body>
<html>

这是CSS：

#maincontainer{
width: 1020px; 
margin: 0 auto; /*Center container on page*/
}

#header{
    position: relative;
    height: 150px; 
    width: 100%;
}

#header >div{
    float: left;
}

#verticaltext{
    width: 20px;
    height: 150px;
}

.verticaltext{
    font-size: 0.600em;
    line-height: 20px;
    padding: 0;
    margin: 0;
    height: 20px;
    width: 150px;
    white-space: nowrap;
    text-align: center;    
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
}

感谢所有花时间阅读本文并冒险回答的人。非常感激。埃尔

于 2016-12-03T05:37:27.287 回答
0

根据您的帖子，我了解到您希望标题项目水平并排，所有这些都必须位于中心。

您可以在主容器上使用 display:flex 和 margin:0 auto 来使内容居中

检查这个片段

#maincontainer {
  width: 1020px;
  margin: 0 auto;
  /*Width of main container*/
  /*Center container on page*/
}
#header {
  display: flex;
  height: 150px;
  /*Height of top section*/
}
#box {
  width: 20px;
  height: 150px;
  border: 1px solid red;
}
.verticaltext {
  font-size: 0.600em;
  text-align: center;
  border: 1px solid red;
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: 0 0;
}
<body>
  <div id="maincontainer">
    <div id="header">

      <img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
      <div id="box">
        <p class="verticaltext">vertical text</p>
      </div>
      <img src="image/right_picture.jpg" alt="right_pic" height=150 width=748>

    </div>
  </div>
</body>

希望能帮助到你

于 2016-12-03T05:38:11.313 回答
0

你考虑过使用弹性盒子吗？对于您正在尝试做的事情，这似乎是一个非常简单的解决方案。 

.header {
    display:flex;
    align-items: center;
 }

这是未经测试的，但基本上标题内的所有项目都应垂直居中。我会在这里阅读 flexbox：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2016-12-03T04:30:14.023 回答