0
지금 브라운 대학교의 NLCC에서 저의 스승이자 psiTurk Stroop 작업의 맨 아래에 이미지를 포함하려고합니다. 우리는 프로젝트의 Dev Branch와 협력하고 있습니다. 오른쪽과 왼쪽 상자에 표시 빨간색과 녹색의 상자를 제외하고 http://i.stack.imgur.com/4IjNG.png이미지 형성 // HTML
:
우리의 목표는 세 가지 이미지의 행이 다음과 같이 표시하는 것입니다. 그러나 상자를 test.html 페이지의 맨 아래에 표시하도록 코드를 포함하려고 시도했을 때 브라우저에 나타나는 내용입니다.
h1>Test Phase</h1>
<div id="instructions">What color is this word?</div>
<div id="stim"></div>
<div id="query"></div>
<p id="PDisplay"> </p>
<p id="TDisplay"> </p>
<p id="RDisplay"> </p>
<div style = "position: absolute;
left:50;"><img id="Lred" src="static/images/red.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:50;"><img id="Lblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:50;"><img id="Lgreen" src="static/images/green.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Ccue" src="static/images/cue.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Cblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:370;"><img id="Ctarget" src="static/images/target.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rred" src="static/images/red.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rblank" src="static/images/blank.jpg" IMG HEIGHT = 150/></div>
<div style = "position: absolute;
left:690;"><img id="Rgreen" src="static/images/green.jpg" IMG HEIGHT = 150/></div>
가 난 단지 왼쪽 모서리에 표시되는 이미지를 통해 밀어 요소가있을 수 있다고 생각 : http://i.stack.imgur.com/LKGfk.png
내가 사용하려고 해요 코드는 다음과 같다. 이 문제를 해결하기 위해 CSS 페이지를 조작 해 보았습니다. 그러나 본문의 CSS를 제외한 전체 시트를 삭제하고 모든 이미지가 왼쪽에 계속 표시되는 시점에 도달했습니다. 는 HTML의 다른 요소 또는 이미지의 배치를 제한하고 코드의 다른 속성이 있는지 궁금 해서요
@import url(http://fonts.googleapis.com/css?family=Crimson+Text:400,600italic);
body {
/* background: #999; */
background: black; /* #808090; */
color: white;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
margin: 0 auto;
margin-top: 100px;
width: 800px;
}
h1 {
font-family: "Crimson Text";
font-size: 42pt;
font-style: italic;
}
a {
color: #FFCC90;
}
.warm {
color: #DDAA90;
}
.cool {
color: #ccccff;
}
strong {
font-weight: bold;
color: #DDAA90;
}
/* Instructions */
#main {
margin: 0 auto;
width: 800px;
font-size: 100%;
}
.continue {
font-size: 2em;
width: 5em;
height: 2.5em;
margin: 20px 20px;
}
.instruct p {
text-align: justify;
}
.instruct .prompt {
text-align: center;
font-style: italic;
font-size: 100%;
margin: 0 auto;
margin-top: 30px;
width: 500px;
}
/* Questionnaire */
input {
width: 200px;
height: 50px;
font-size: 22pt;
}
.questionnaire {
text-align: center;
}
.questionnaire .continue {
margin: 0 auto;
margin-top: 20px;
}
.questionnaire h1 {
text-align: center;
}
.questionnaire p {
text-align: left;
}
.questionnaire #warning {
color: red;
font-weight: bold;
}
.questionnaire table {
margin: 0 auto;
/* Border stuff: */
table-layout: fixed;
border-collapse: separate;
border-spacing: 0.25em;
border: none;
}
.questionnaire tr {
display: block;
border-bottom: 1px dashed white;
}
.questionnaire tr:last-child { border: 0; }
.questionnaire td {
padding-right: 0.25em;
vertical-align: middle;
border-width: 0 1px;
border: none
margin: 20px;
padding-bottom: 10px;
}
.questionnaire td:first-child, td + td {border-left: 0; }
.questionnaire td:last-child { padding-right: 0; border-right: 0; }
.answer {
text-align: left;
padding-left: 3em;
}
.questionnaire .questiontext {
vertical-align: top;
width: 300px;
margin: 20px;
font-size: 1.2em;
}
.questiontext em {
font-size: 70%;
}
.questionnaire textarea {
width: 320px;
height: 130px;
}
.questionnaire form {
text-align: right;
}
.questionnaire ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.questiontext {
text-align: right;
}
/* Debriefing form */
#debriefing {
width: 640px;
margin: 0 auto;
}
#debriefingtext {
margin: 0 auto;
padding: 10px 20px;
font-size: 90%;
text-align: justify;
}
#affirmationbox {
position: relative;
margin: 0 auto;
border: 1px dotted white;
padding: 10px 20px;
vertical-align: middle;
}
#affirmationbox p {
text-align: left;
font-style: italic;
}
#affirmationbox table {
border-spacing: 20px;
}
#affirmationbox td {
vertical-align: middle;
font-size: 100%;
color: black;
height: 50px;
cursor: pointer;
}
#affirmative {
background: white;
overflow: hidden;
font-weight: bold;
width: 10em;
}
#negative {
background: white;
font-size: 100%;
width: 25em;
}
: 그냥 경우에, 여기처럼 CSS를 보이는 것입니다.
도움을 주시면 매우 감사하겠습니다.
정말 고마워요.
바이올린을 게시하십시오 – Salketer
위치에 래퍼 div 만들기 : 이미지의 상대적 위치 – Sbml
@Salketer A fiddle? – beckah