Question

我有以下HTML。

<div class="cover_in">
        <div class="ver_text_box">
            <div class="inl_text_top">This is the top one</div>
            <div class="inl_text_center">THis is second one</div>
            <div class="inl_text_bottom">This is trhird</div>
            <div class="inl_text_end">THis is last</div>
        </div>
</div>

这里当我应用css时，会创建一个垂直框（我想要这个），这里的数据就像下面一样被调度。

This 
is 
the 
top 
one
THis 
is 
second 
one
This 
is 
trhird
THis 
is 
last

我想知道我是否可以在同一行中获取此内容，我创建的框也会根据页面高度进行调整，这样会很好，但是框内的数据会消失掉

这是fiddle

请让我知道如何完成它。

由于

Answer 1

删除＆＃39;转换：旋转（90度）＆＃39;来自你的文字div

Answer 2

刚刚编辑了我的答案，看看它是否适合您：

<强> HTML

<div class="ver_text_box">
    <div class="inl_text_top">This is the top one</div>
    <div class="inl_text_center">This is second one</div>
    <div class="inl_text_bottom">This is third</div>
    <div class="inl_text_end">This is last</div>
</div>

<强> CSS

.ver_text_box {
    width: 10%;   
    height: 100%;
    border: 2px solid black;
    margin-left: 3.5%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-weight: bold;
    white-space: nowrap;
}

.inl_text_top {
    display: block;
    transform: rotate(90deg);
    margin-top:2em;

}

.inl_text_center {
    display: block;
    transform: rotate(90deg);
    margin-top: 10em;

}

.inl_text_bottom {
    display: block;
    transform: rotate(90deg);
    margin-top: 10em;

}

.inl_text_end {
    display: block;
    transform: rotate(90deg);
    margin-top: 10em;
    margin-bottom: 5em;

}

Fiddle

Answer 3

很抱歉没有正确理解。现在文本是垂直的并且在同一行

<强> HTML

<div class="box">This is the top one</div>
<div class="box">This is second one</div>
<div class="box">This is third</div>
<div class="box">This is last</div>

<强> CSS

.box{
    display:inline-block;
    border:1px solid black;
    padding:10px;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
    margin-top:10%;
}

http://jsfiddle.net/VOXRAZR/AjYvb/8/

轮换

-webkit-transform:rotate(90deg);//for safari and chrome -moz-transform:rotate(90deg);//for firefox -ms-transform:rotate(90deg);//for IE -o-transform:rotate(90deg);//for opera transform:rotate(90deg);//latest browsers

在一行显示

display:inline-block;

Answer 4

我看到数据离开另一个框的原因，

我已经用修复程序更新了这个小提琴。

这背后的原因是，如果孩子是display: inline-box，那么父母应该是display:box，浮动也有自己的想法，我们没有定义div的width。

这是我的CSS：

.box {
    position:relative;
    display:inline-block;
    border:1px solid black;
    float:left;
    padding:10px;
    text-align:center;
    width:100px; height:100px;
    margin:10px;
}
.ver_text_box{
    display:block;
    position:relative;
}
.ver_text_box div {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

此处还有fiddle

创建一个垂直文本div

4 个答案: