Question

我正在尝试使用Bootstrap col-md-6将内容和图像对齐/对齐以将它们分开。这对我来说很难解释，所以我在这里包含的图像是这样的：

基本上是图像全角到右角。和左边的文字。我试图将图像放到col-md-6到同一个容器中，但看起来图像没有定位到角落，但是当我将它分开时，它看起来很好，但它没有响应。图像将覆盖内容/文本。

我正在尝试使用Bootstrap方式进行此操作，但也希望通过使用纯CSS方式来学习它。在这里随意包含您的答案，以便人们可以从中受益。

img.img-responsive.img-absolute {
    position: absolute;
    right: 0px;
    top: -250px;
    max-height: 650px;
    width: 650px;
}

#center {
    position: relative;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="text-center">
                <h1>Meet Our Best Agents</h1>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                <button class="btn btn-primary btn-lg">Button</button>
            </div>
        </div>
        <!-- Image should include at here -->
    </div>
</div>

<div id="center">
    <img class="img-responsive img-absolute" src="https://dummyimage.com/4000x3000/000/fff">
</div>

Answer 1

试试这个

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="text-center">
                <h1>Meet Our Best Agents</h1>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                <button class="btn btn-primary btn-lg">Button</button>
            </div>
        </div>

        <!-- Image should include at here -->
        <div class="col-md-6">
            <div id="center">
                <img class="img-responsive img-absolute" src="https://dummyimage.com/4000x3000/000/fff">
            </div>
        </div>
    </div>

</div>

Answer 2

您必须在代码中进行一些更改..

<link 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" 
type="text/javascript" ></script>
<script 
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" 
type="text/javascript" ></script>




 <div class="col-lg-12 row">

 <div class="col-lg-6">
    <p>A wonderful serenity has taken possession of my entire soul, 
    like these sweet mornings of spring which I enjoy with my whole 
    heart. I am alone, and feel the charm of existence in this spot, 
    which was created for the bliss of souls like mine. I am so happy, 
    my dear friend, so absorbed in the exquisite sense of mere 
    tranquil 
    existence, that I neglect my talents. I should be incapable of 
    drawing a single stroke at the present moment; and yet I feel that 
    I 
    never was a greater artist than now.</p>
     <button class="btn btn-primary btn-lg">Button</button>
 </div>


 <div class="col-lg-6">
    <img class="img-responsive img-absolute" 
 src="https://dummyimage.com/4000x3000/000/fff">
  </div>


 </div>

这将解决你的问题。但是，你必须在这里做一些CSS工作。你的col-lg-12或col-md-12问题将得到解决。如果你对这段代码有任何疑问。评论如下。

Bootstrap图像右中心角使用css绝对值

2 个答案: