Question

很抱歉，这可能是一个'nuby'类型的问题，

我希望在可变宽度图片的旁边有一个Header和一些段落文本。为了增加乐趣，文本必须能够位于图像的左侧或右侧，但在HTML中它始终是第一个。（这样我可以使用媒体查询将它们堆叠在移动显示器上）

我尝试过各种各样的东西，包括使用display：table但是如果我浮动图像它似乎停止工作。

我可以在Wordpress中使用PHP将文本div的宽度设置为（'页面宽度' - '图像宽度'），但肯定有更好的方法吗？

    <!-- text left-->
    <div class="l">
        <div class="td">
            <h2>History</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis!</p>
        </div>
        <div class="">
            <img src="images/History.jpg"  alt="Our History"><!-- class="img-responsive" -->
            <div style="clear: both;"></div>
        </div>
    </div> 
    <!-- text right-->
    <div class="r">
        <div class="td">
            <h2>History</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, officiis deserunt dolor dolorem voluptas distinctio nostrum nihil natus consequatur sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique sunt doloremque fugit quidem aliquam iure dolor maiores voluptate? Similique, nesciunt, ex, unde, quos porro cum quasi facere dolorem eaque incidunt praesentium totam beatae voluptas velit voluptatum maxime officiis suscipit quis iste quisquam molestiae cumque error laudantium corporis vel et sapiente expedita adipisci accusantium doloribus. Fuga quisquam dolore officiis ipsa reprehenderit quae sapiente reiciendis! Ea, recusandae, ab, accusantium, natus eligendi officia laboriosam quo sed odit dolorem asperiores in libero placeat vitae quae. Itaque, iusto quo harum deserunt quidem laboriosam commodi dicta natus voluptate asperiores debitis tempora distinctio officia odio consectetur vero.</p>
        </div>
        <div class="">
            <img src="images/History.jpg"  alt="Our History">
        </div>
    </div>

的CSS：

* {
box-sizing:border-box;
}

.l,.r {
/*  display: table;  */
    width:100%;
/* height: 421px; */
}

.l .td {
    width:38%;
    float:left;
    position:absolute;
    top:50%;
/*  height: 421px; */
    margin-top:-100px;
/*  float:left; */
/*
    display: table-cell;
        display:table-cell!important;
    vertical-align:middle;
*/
/*  float:none; */
}

.l img {
    float:right;
    width:62%;
}

.r,.l {
    position:relative;
}

.r .td {
    width:38%;
    position:absolute;
    top:50%;
    height:60%;
    margin-top:-100px;
    right:0;
}

.r img {
    width:62%;
}

.l .td,.r .td {
    padding-left:5%;
    padding-right:5%;
    max-height:100%;
    overflow:auto;
}

Answer 1

希望这个帮助

添加一些css，

.test1 txtWhiteBg col-xs-12 {
    margin-top:-200px; //adjust to your image size
  }

<div class="row ">
   <div class="test2 noLRPadding col-xs-12">
      <img src="images/History.jpg"  alt="Our History"><!-- class="img-responsive" -->
   </div>
   <div class="test1 txtWhiteBg col-xs-12">
      <h2>History</h2>
      <p>Lorem ipsum dolor sit amet, consectetur a!</p>
   </div>
</div>

如何将多行文本居中于可变宽度图像

1 个答案: