Question

您好我有以下基础代码：

代码：

$(document).ready(function () {
    $(document).foundation();
});

body {
  background-color: #a3d5d3;
}

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
/*    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
        color:#ffffff;
        margin-left: 70%;
    position: absolute; 
        width:250px;
        height:60%;
    top: 0; 
    bottom: 0; 
    background: black; 
    opacity:0.5;
        padding :20px;
}

<div class="row fullWidth">
        <div class="large-12 columns">
            <div id="wrap">
                                        <div id="text">
                                            <br /><br /><br /><br />
                                            <h3>MCA Coding and MLC Compliance</h3>
                                            <p>
                                              This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side.  

                                            </p>
                                        </div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
            </div>
        </div>
</div>

在大屏幕上它可以正常工作 - 我希望图像上的文字覆盖在右边 - 但是如果你缩小屏幕，文本开始消失在右边 - 任何人都有任何想法如何保持它所有屏幕都一致??? 感谢

Answer 1

使用left：position而不是margin来定位更好。您可能还想删除height属性，以便容纳更多内容。

#text {
   padding-top: 2em; /*replaces the <br>s in your html*/
   color: #ffffff;
   position: absolute;
   width: 250px;
  /*height: 60%;*/
  top: 0;
  right:7.5%; /* instead of margin*/
  background: black;
  opacity: 0.5;
  padding: 20px;
}

我做了一个codepen演示： https://codepen.io/kemie/pen/pPoqOv

在基础上的图像上叠加文本

1 个答案: