Question

我是css的初学者，我正在我的投资组合网站上工作，但我无法摆脱这个问题。所以我想知道是否有人可以帮我找出更高级的html / css。我想在左侧和右侧的图像和与文本相反的文本与按钮。问题：jsfiddle

我想让它看起来像这样：

http://larsdejonge.nl/img/werk/work.png

感谢您已经在调查此问题。 - 拉尔斯

Answer 1

请参阅下面给出的链接，它会对您有所帮助。

"http://jsfiddle.net/JDH3E/4"

我已经更新了一些css和HTML没有完全完成，因为第二张图片大小你应该修复图像大小，因为你的父div与类＆＃34; leftimage＆＃34;宽度为50％，图像更大，请修复图像尺寸

Answer 2

Js fiddle demo with html

I have created html and css code for your structure.

enter image description here

Answer 3

基本上你的css的问题在于你给父div提供了50％的宽度，并且他们已经采用了这个宽度，但你没有限制图像宽度，即为什么它被错误对齐。

你还没有添加文字，所以我也没有添加。

根据您的要求，我创造了一个小提琴。请检查！

http://jsfiddle.net/JDH3E/1/

<body>
        <div id="content">              

            <div class="leftimage">
                <img src="http://larsdejonge.nl/img/werk/foto_2.jpg" alt="fiets"/>
                <div class="left">
                    <div id="button">   
                        <a href="http://www.larsdejonge.nl/project2.html" style="text-decoration: none;">See Project</a>
                    </div>  
                </div>  
            </div>  


            <div class="rightimage">
                <img src="http://larsdejonge.nl/img/werk/foto_1.jpg" alt="fiets"/>

                <div class="left">
                    <div id="button">   
                        <a href="http://www.larsdejonge.nl/project1.html" style="text-decoration: none;">See Project</a>
                    </div> 
                </div>
            </div>



        </div> 
 </body>



            <!-- Wanna make looking like this: http://larsdejonge.nl/img/werk/work.png -->

css就在这里：

#content{
    width:100%;
    max-width:100%;
}


.leftimage{


    width:50%;
    max-width:50%;
    float:left;
    position:relative;
}

.leftimage img{
    width:100%;
    max-width:100%;
}

.rightimage img{
    width:100%;
    max-width:100%;
}

.rightimage{
   width:50%;
    max-width:50%;
    float:right; 
    position:relative;

}


#button {
    margin-top: 30px;
}
#button > a {
    border: 1px solid #99bbd4;
  border-radius: 2px;
    padding: 7px 20px;
    text-decoration: none;
    color: #99bbd4;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
    font-size: 13px;
    transition: all .2s ease;
}

#button > a:hover {
    background-color: #99bbd4;
    color: #fff;
}

.left{
 position:absolute;
    right:10%;
    top:50%;
}

您可以根据自己的要求改变这一点。

Answer 4

这是我的版本：http://jsfiddle.net/kxy8u/7/

重写了您的HTML结构，因为您可能会在不同的浏览器中遇到UI不一致。还删除了链接周围的包装（顺便提一下#button个元素，应该使用类.）。

.content__row--container的作用是允许您安全地为其添加边距或填充，否则如果在父元素上应用填充，则会增加宽度大小，并且列不会在同一行。而不是你可以在父元素上使用box-sizing : border-box;，但除非你添加polyfill，否则它在IE8中不起作用。

以下是它的外观： enter image description here

文字和按钮对齐

4 个答案: