Я действительно начинаю css, и я работал над своим портфолио, но я не могу выйти из этой проблемы. Поэтому мне было интересно, может ли кто-нибудь помочь мне, кто более продвинутый с html/css. Я хочу на левой и правой стороне изображения и напротив текста с помощью кнопки. Проблема: jsfiddleText and Button align
Я хочу, чтобы она выглядела так:
http://larsdejonge.nl/img/werk/work.png
Спасибо за уже глядя в эту проблему. - Lars
Вот моя версия: http://jsfiddle.net/kxy8u/7/
переписаны ваш HTML структура, как вы могли бы испытать UI несогласованность в разных браузерах. Также удалили обертку вокруг ваших ссылок (кстати, вы повторяли элементы #button, вместо этого следует использовать класс .).
Кроме того, роль .content__row--container заключается в том, чтобы позволить вам безопасно добавлять к нему пометку или отступы, в противном случае, если вы примените дополнение к родительскому элементу, оно увеличит размер его ширины, а столбцы не будут находиться на одной линии. Вместо этого вы можете использовать box-sizing : border-box; на родительском элементе, но он не будет работать в IE8, если вы не добавите polyfill.
Вот как это выглядит: 
Это почти отлично, что я пытался сделать. Могли бы вы, возможно, сделать еще 1 вещь, если это возможно? Из нижней строки и изображения сделайте 40 пикселей со стороны. Таким образом, «Показать проект buttom» всегда будет рядом с изображением, но не более чем на 40 пикселей. – FlatDesigner
Вы имеете в виду что-то подобное, но с 40px промежутком между нижней линией и изображением? http://jsfiddle.net/kxy8u/9/ –
Yeeh, но только 40px над линией, так что это на дне, если это возможно. – FlatDesigner
См. Ниже данную ссылку, это поможет вам.
"http://jsfiddle.net/JDH3E/4"
Я обновил некоторые CSS и HTML не полностью сделано потому, что Ф.О. второго размера изображения, вы должны зафиксировать размер изображения, потому что ваш родительский DIV с классом «leftimage» ширина составляет 50%, а изображение больше поэтому, пожалуйста, исправить изображение размер
Я сделаю для вас меньше фотографий. – FlatDesigner
Нет, мне не нужны изображения меньшего размера.Просто дайте мне знать, что все изображения будут одинаковой ширины по высоте? –
Привет, Йогеш. Я изменил изображение. – FlatDesigner
в основном проблема с CSS, что вы дать n ширина 50% для родительского div, и они взяли эту ширину, но вы не ограничили ширину изображения, то есть почему она была неправильно выровнена.
Также вы не добавили текст в свою скрипку, поэтому я также не добавил этого.
Я создал скрипку в соответствии с вашими пожеланиями. Пожалуйста, проверьте!
<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%;
}
Вы можете определенно изменить это в соответствии с вашими требованиями.
Пожалуйста, смотрите теперь я сделал некоторые изменения http://jsfiddle.net/kxy8u/3/ –
я могу исправить, если вы можете подтвердить размер изображения. –
Я новичок в stackoverflow, как поставить HTML и CSS в вопрос? – FlatDesigner