Develop Reference

How to make my red circle always stays on the green line using html and css code?

I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.

Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>

Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>

FlexBox container isn't holding my div, can someone provide me an answer as to why

enter image description here
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.
#Right-Box-Wrapper{
display: flex;
position: fixed;
width: 320px;
min-width: 320px;
height: 100% !important;
right: 0px;
top: 0px;
border: 8px solid black;
border-radius: 10px;
background-color: #484848;
}
#Input-Wrapper{
display: flex;
justify-content: center;
}
#mwrap{
width: 100%;
display: flex;
justify-content: center;
}
#message-wrapper::-webkit-scrollbar{
width: 5px;
}
#message-wrapper::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#message-wrapper::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#message-wrapper{
top: 12px;
position: absolute;
height: 80%;
width: 95%;
background-color: #333333;
border: 3px solid black;
overflow: auto;
overflow-wrap: break-word;
}
#a{
position: fixed;
height: 100%;
width: 10px;
background-color: #262626;
top: 0px;
right: 0px;
}
#inpbox{
background-color: #333333;
position: absolute;
width: 95%;
height: 50%;
top: 80px;
text-align: left;
color: whitesmoke;
border: 3px black solid;
font-family: sans-serif;
font-size: 13px;
resize: none;
}
#inpbox::-webkit-scrollbar{
width: 5px;
}
#inpbox::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#inpbox::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#inpbox:focus{
outline: none;
}
#Chat-Wrapper{
position: absolute;
bottom: 0px;
right: 0px;
z-index: 50;
width: 100%;
height: 25%;
}
.Inputs{
color: whitesmoke;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.Tlc{
color:red;
font-weight: 1000;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.dice_roll{
color:greenyellow;
font-weight: 1250;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top:greenyellow solid 2px;
border-bottom: greenyellow solid 2px;
font-family: sans-serif;
}
#canvas-wrapper{
justify-content: center;
display: flex;
min-width: 350px;
height: 400px;
background-color: rgb(112, 112, 78);
}
#screen-wrap{
display: flex;
flex-direction: row;
}
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
#flxt{
display: flex;
flex-direction: row;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id = "screen-wrap">
<div id = "canvas-wrapper">
<canvas id = "canv">
</canvas>
</div>
<div style="background-color: aqua;width: 100px;height: 100px;">
<canvas id = "canv">
</canvas>
</div>
<div id = "Right-Box-Wrapper">
<div id = "mwrap">
<div id = "message-wrapper">
</div>
</div>
<div id = "Chat-Wrapper">
<div id = "Input-Wrapper">
<textarea placeholder="Type here...." id = "inpbox"></textarea>
</div>
</div>
</div>
</div>
<div id = "flxt">
<div style="padding: 10px;background-color: aqua;">
asdasdasd
</div>
<div style="padding: 10px;background-color: aqua;">
asdasdasdasdasd
</div>
</div>
<script src="site.js"></script>
</body>
</html>
I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem

From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox. Ill give you a basic example. First I set all objects to box sizing border-box to help when using percentages. Position your container with position fixed and place it on the top right (you already have this done). Make it display flex and give it a flex direction of column so the objects stack on top of each other. Give it a height and width. I use vh(viewport height) and vw(viewport width). Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space. Next set the height on your chat container I set mine to 25 viewport height. This means your message area will take up all but 25% of the viewport height. Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning. Take a good look at how absolute moves objects out of the normal flow of the document https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
box-sizing: border-box;
}
.chat-container {
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 40vh;
}
.message {
flex-grow: 1;
background-color: #808080;
border: 4px solid #000;
border-bottom: 2px solid #000;
border-radius: 10px 10px 0 0;
}
.chat {
height: 25vh;
border: 4px solid #000;
border-top: 2px solid #000;
border-radius: 0 0 10px 10px;
}
.chat-area {
width: 100%;
height: 100%;
background-color: #808080;
border-radius: 0 0 5px 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}
<div class="chat-container">
<div class="message"></div>
<div class="chat">
<textarea placeholder="input message here" class="chat-area"></textarea>
</div>
</div>

Incase the first answer does not help Ill give you an example on how to position objects using flexbox. This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.remaining-area {
flex-grow: 1;
background-color: #f2f2f2;
}
.chat-area {
width: 30vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.message {
flex-grow: 1;
background-color: #ccc;
}
.chat {
height: 25vh;
}
<div class="wrapper">
<div class="remaining-area">
<p>this area is left empty</p>
</div>
<div class="chat-area">
<div class="message">
<p>message area</p>
</div>
<div class="chat">
<p>chat area</p>
</div>
</div>
</div>

Overlay 4 circles on each corner of a square CSS

I am creating a Simon Says game that uses the flashing of colors as a memory game.
I want to overlay 4 circles on each of the four corners of a background square (the square will be transparent in the final version).
I have attached an image LINK TO IMAGE of what I would like it to look like and I've included the HTML and CSS.
.html {
color: grey;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
/*position: relative;*/
/*float: left;*/
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
</head>
<body>
<div class="game">
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
</div>
</div>
</body>
</html>

As has been suggested, you can use absolute positioning in order to achieve what you want.
I have moved the circle divs into the #square div, as to my understanding we want to position the circles within that div.
Then you can use left, right, top and bottom to position them, as I have done in the example below.
.html {
color: grey;
}
.game {
position: relative;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
position: absolute;
left: 0;
top: 0;
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
position: absolute;
right: 0;
top: 0;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
position: absolute;
left: 0;
bottom: 0;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
position: absolute;
right: 0;
bottom: 0;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
<link rel="stylesheet" href="assignment-02.css">
</head>
<body>
<div class="game">
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
</div>
</div>
<script src="assignment-02.js"></script>
</body>
</html>

How can I calculate the height of dynamic elements?

Here is my code:
.parent{
position: fixed;
border: 1px solid;
height: 40%;
width: 300px;
max-height: 200px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
height: 100%;
overflow-y: scroll;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>
As you see .second_child is out of parent. I want to keep it inside .parent element. How can I do that?
In other word I want to implement something like this:
.second_child{
height: 100% - 40px;
/* 40px: 20px of .first_child's height, 10+10px of .first_child's padding */
...
}
Note: I don't want to use neither calc() or box-sizing: border-box; .. Because they aren't supported in old browsers like IE7. So I'm looking for a third approach.

Would something like this work?
.parent{
position: relative;
border: 1px solid;
height: 100%;
width: 300px;
max-height: 200px;
min-height: 100px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
overflow-y: scroll;
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>

Why the height of div make a gap between the image and div?

Here is my html struct, simple
<div> <img style="width:100%;height:100%"/> </div>
div shows in the chrome:
and the image, there is a gap between the div and image
noticed that the image supposed to cover the div,
if I change the height of div more than 10px, looks perfect.
the image cover the div
I've tested if the height of div is less, the gap is bigger.
So what's the problem?
there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:
._display_style {
display: none;
}
.sketchup_display_style {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
.cab_list_form #shape div img {
width: 80%;
height: 80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding: 0.2em 0 0.6em;
text-align: center;
background-repeat: no-repeat;
cursor: pointer;
}
.cab_list_form #shape div span {
width: 100%;
display: block;
}
.toggle-red {
border: 2px solid red;
}
.cab_style_img {
background-color: #fff;
border: 2px solid #ebebeb;
text-align: center;
}
.cab_style_img img {
width: 290px;
height: 240px;
}
.question_img {
padding-right: 1em;
float: left;
}
#cab_condition table td label {
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius: 20px;
text-align: center;
width: 55px;
height: 20px;
line-height: 20px;
margin: auto;
background-color: #ffffff;
cursor: pointer;
padding: 0 0.5em;
}
#cab_condition table td label input {
display: none;
}
#cab_condition table td label span {
margin: 0.1em 0.6em;
}
.howmanypart_td span {
margin: 0.1em 0.7em;
}
.down_search div {
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
height: 30px;
line-height: 30px;
color: #30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select {
border: 1px solid #bdbdbd;
width: 130px;
height: 28px;
border-radius: 20px;
/*text-align:center;*/
color: #30b2ba;
cursor: pointer;
}
.door-background {
position: absolute;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
padding: 0;
margin: 0;
}
.door-background th,
.door-background td {
border: 2px solid #999;
border-width: 0 2px 2px 0;
padding: 0;
}
.tableizer-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tableizer-table th,
.tableizer-table td {
border: 1px solid #999;
border-width: 0 1px 1px 0;
padding: 2px;
}
.wardrobe_type_list {
width: 100%;
height: 40px;
}
.wardrobe_type_list .groups_check {
float: left;
margin-right: 25px;
height: 25px;
line-height: 25px;
}
.wardrobe_type_list .groups_check img {
height: 100%;
}
.wardrobe_type_list .groups_check input[type=radio] {
height: 25px;
line-height: 25px;
}
.display-none {
display: none;
}
.search-container {
float: left;
}
body {
font-size: 14px;
margin: 15px;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
}
.pax_highlight {
position: absolute;
border: solid 3px #329afb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 3;
}
.pax_highlight_text {
color: #329afb;
font-weight: bold;
font-size: 12px;
bottom: 0px;
margin-bottom: -19px;
position: absolute;
text-align: center;
}
#groups_list {
left: 10px;
position: relative;
}
#white_hide_menu {
background-color: white;
height: 51px;
position: absolute;
top: 517px;
width: 5px;
display: none;
}
.menu_groups {
height: 140px;
overflow: hidden;
position: relative;
width: 100%;
}
.thumbs_layers_div_a {
display: none;
}
.items div {
float: left;
}
.items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.thumbs_layers_group {
height: 100px;
}
.thumbs_layers_div {
background-color: white;
cursor: pointer;
float: left;
margin-left: 8px;
padding: 1px;
width: 93px;
height: 93px;
text-align: center;
display: inline-block;
display: inline;
}
.thumbs_layers_div_selected {
border-color: #389CFC;
border-width: 3px;
background-color: #389CFC;
}
.thumbs_layers_div img {
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
height: 91px;
}
.thumbs_layers_add_item {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.thumbs_layers_div_selected img {
border-color: #389CFC;
}
.pax {
height: 180px;
}
#layers_pax_buffer {
pointer-events: none;
}
#layers_pax_buffer {
display: none;
border: 1px solid #CCCCCC;
width: 1048px;
height: 585px;
position: absolute;
top: 98px;
}
.val {
width: 1048px;
height: 150px;
}
#dialog-confirm,
#dialog-confirm2 {
display: none;
}
.pax_h_dimension {
display: none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display: none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder: 2px solid grey;
position: relative;
margin: 10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder: 1px solid green;
background: #f0f0f0;
overflow: hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width: 800px;
margin: 0 auto;
height: auto;
}
.attr {
width: 90%;
float: left;
}
.name {
width: 90%;
text-align: left;
margin: 10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height: 18px;
border: 1px solid #bbb;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
cursor: pointer;
}
#message {
width: 140px;
height: 80px;
border: 3px solid #ddd;
margin: 5px;
padding: 10px;
float: left;
background: #eee;
}
#message div {
margin-bottom: 10px;
}
.button {
width: 150px;
height: 40px;
padding: 10px;
float: right;
xmargin-top: 300px;
}
.button button {
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width: 80px;
height: 30px;
margin: 5px;
font-size: 14px;
xfloat: right;
}
.pax {
border: 3px solid #eee;
height: auto;
margin: 20px;
overflow: hidden;
min-width: 800px;
xoverflow-y: hidden;
}
#items_scroll {
overflow-x: scroll;
padding: 5px;
}
.thumbs_layers_div {
overflow: hidden;
height: 120px;
}
.wardrobe_type_list {
xpadding-top: 10px;
xpadding-left: 10px;
xwidth: 90%;
margin: 10px;
margin-bottom: 0;
}
#items {}
.thumbs_layers_div_selected .thumbs_layers_add_item {
color: white;
}
.v #items img {
width: 95px;
height: auto;
}
.v .thumbs_layers_div {
height: 70px;
}
<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
<div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>%E5%B7%A6</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>copyRight</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>dingxian</div>
<div>宽度:2100</div>
<div>高度:65</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>

Try to this
img {
vertical-align: top;
}
because img vertical-align is
baseline - the default value.
more about vertical-align

#Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually.
The problem is easy to solve ,one solution is setting the display attribute as block for the img.
please try it
img{
display:block;
}