Поместите радио кнопки над изображением
Чтобы быть реалистичным, document.ready не требуется ни для чего другого, кроме как правильно манипулировать DOM, и это не всегда необходимо или лучший вариант. Я имею в виду, что когда вы разрабатываете большой плагин jQuery, например, вы вряд ли используете его во всем коде, потому что вы пытаетесь сохранить его DRY, поэтому вы максимально абстрактны в методах, которые управляют DOM, но предназначены для вызова позже. Когда весь ваш код плотно интегрирован, единственный метод, открытый в document.ready, обычно init, где происходит вся магия DOM. Надеюсь, это ответит на ваш вопрос.
4 ответа
Даже если вы говорите, что хотите, чтобы они были над вашим изображением, на изображении, которым вы поделились, переключатели отображаются с правой стороны изображения. Так что я немного озадачен тем, что вы на самом деле хотите.
Но я сделал простой пример ниже. Вы можете расположить их так, как вам нравится, или прокомментировать ниже, если вам нужна моя помощь.
P.S. как я сказал в своем комментарии: The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
form {
position:absolute;
right: 25%;
top: 50%;
transform:translateY(-50%) translateX(100%);
display: flex;
flex-direction: column;
}
.general {
position: relative;
}<div class="general">
<img src="http://via.placeholder.com/640x360" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>Я думаю, что вы должны попробовать следующий тип кода для вышеуказанного запроса. Я изменил вам структуру HTML и полностью изменил ваш текущий CSS:
.general{
width: fit-content;
}
.img{
display: flex;
align-items: end;
}
img{
border: 1px solid black;
}
body {
background-color: #979797
}
.options{
display: flex;
flex-direction: column;
}
.radio{
position: relative;
height: 50px;
}
input[type="radio"]{
position: absolute;
top: calc(50% - 4px);
right: 0;
margin: 0;
}<div class="general">
<form action="">
<div class="img">
<img src="https://via.placeholder.com/150" class="center">
<div class="options" class="center">
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="apple">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="chicken">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="carrot">
</div>
</div>
</div>
</form>
</div>Помните , что если на вопросы есть только один ответ, тогда имя радиоблока должно быть одинаковым, а значение должно быть другим. В противном случае все переключатели будут выбраны одновременно и не могут быть отменены.
Я надеюсь, что этот код полезен. Благодаря.
Я бы поместил переключатели в один div и затем дал фону div. Например:
<html>
<head>
<style>
.general{}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.radio-size {
height: 100px;
width: 100px;
}
.bg-apple {
background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-chicken {
background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-carrot {
background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#979797">
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
<form action="" style="background-img:url("")">
<div class="radio-size bg-apple">
<input type="radio" name="answer 1" value="apple">
</div>
<div class="radio-size bg-chicken">
<input type="radio" name="answer 1" value="chicken"> <br>
</div>
<div class="radio-size bg-carrot">
<input type="radio" name="answer 1" value="carrot">
</div>
</form>
</div>
</body>
</html>Примечание: все радиокнопки должны иметь одинаковые атрибуты «name» , так что вы можете выбрать только один из них. Если вы хотите иметь возможность выбрать несколько опций, вы должны использовать вместо этого флажок.
С помощью flexbox вы можете использовать следующее решение:
body {
background:#979797;
}
.question {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.answers {
display:flex;
flex-direction:column;
}
label.answer {
position:relative;
height:100px;
}
label.answer input[type="radio"] {
top:0;
left:0;
position:absolute;
}<form action="">
<h2>Question 1:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="carrot">
</label>
</div>
</div>
<h2>Question 2:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="carrot">
</label>
</div>
</div>
</form>