Question

我正在尝试创建与下图所示完全相同的内容。到目前为止，它对我来说并不好看。

这是JSFiddle： https://jsfiddle.net/6o3nz6g9/

HTML：

cd E:
cd code

CSS：

<h1>This is Sparta!</h1>
<div class="container">
<div class="row">
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
  <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
</div>
</div>

如何获得所需的效果？仅供参考：我正在研究Bootstrap框架。

Answer 1

您可以更改.services__text的定位，然后在translate之前使用image对齐。

.services__text {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg) translate(-40%, -200%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>This is Sparta!</h1>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
  </div>
</div>

Answer 2

嘿Champ，您可以通过以下CSS解决您的问题

.services__text {
  position: absolute;
  text-align: right;
  -moz-transform: rotate(-90deg) translate(-100%, -100%);
  -webkit-transform: rotate(-90deg) translate(-100%, -100%);
  -o-transform: rotate(-90deg) translate(-100%, -100%);
  -ms-transform: rotate(-90deg) translate(-100%, -100%);
  transform: rotate(-90deg) translate(-100%, -100%);
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h1>This is Sparta!</h1>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
    <div class="col-xs-4">
      <div class="services__text">Title Text Here</div>
      <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" />
    </div>
  </div>
</div>

Answer 3

在类.service_text

的代码中添加以下css属性

top:20px;  left:-126px;  position:absolute;

在class="col-xs-4" class="col-xs-4 parent"添加一个课程并为parent添加以下css。 position: relative; padding-left: 8px;

这将给出完全相同的结果。如果你想进一步解释，我很乐意帮助你

Answer 4

此方法适用于任何长度的文本（只要它是一行）。

.services__text {
    position:absolute;
    transform: rotate(-90deg) translate(-100%);
    transform-origin: left top;
    width:100%;
    left:-8px;
    text-align:right;
}

translate(-100%)将元素的新位置 - 宽度的-100％向左移动（向下）。
width:100%;为您的标题空间扩展。这个元素是 height 。
text-align:right;将文字推送到图片的顶部
position:absolute;＆amp; left:-8px;将文本推送到图像的外部（可能与其他元素重叠）

对齐图像旁边的垂直文本

4 个答案: