css 클래스가 제대로 작동하지 않습니다.

더 많이 알기

내 웹 사이트를 다시 디자인하고 있습니다. 그리고 그렇게하면 내가 작성한 CSS 코드를 사용하여 몇 가지 문제가 있습니다.

나는 div를 사용하여 이미지와 텍스트를 나란히 가져옵니다. 텍스트를 올바른 위치로 이동할 수 없습니다 (그림 참조). 여백 왼쪽이 CSS 파일에있을 때 작동하지 않는 것 같지만 div 태그에 직접 삽입 될 때 작동합니다. ?

또한 나는 html 코드에서 이미지 크기를 설정할 필요가 없지만 CSS 코드에서 이것이 가능하다는 것을 추가하고 싶습니다.

내가 얻는 것

내가 얻는 것

내가 원하는 것

내가 원하는 것

body
{
	background:#333 url(bg.jpg) repeat top left;
	font-family:Arial;
	color:white;
	text-align:center;
}

body header.heading
{
	width:1150px;
	/*background:transparent url(../images/menu/MEbanner.jpg) no-repeat top;
	background-size: 1150 100px;
	padding-top:101px;*/
	margin:0 auto;
	z-index:0;
	
}


body.Content
{
	width:1150px;
}

main
{
width:1150px;
	margin: 0 auto;
}

section 
{
	text-align:left;
	margin:0 auto;
}

header nav
{
	width:1150px;
	background:transparent url(../images/menu/MEbanner.jpg) no-repeat top;
	background-size: 1150 100px;
	padding-top:101px;
	margin:0 auto;
	z-index:0;
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

header nav li {
    float: left;
    border-right: 1px solid #bbb;
}

header nav li:last-child {
    border-right: none;
}

/*header nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
}*/

/* Change the link color to #111 (black) on hover */
header nav li a:hover {
    background-color: #111;
}

header nav li.active {
    background-color: #4CAF50;
}

header nav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
}

header nav li a:hover, .dropdown:hover .dropbtn {
    background-color:  #111;
}

header nav li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

nav 
{
	text-align:left;
	margin:0 auto;
}

.hidden {display:none}

hr
{	
	border-left: none;
	border-right: none;
	height:4px;
	margin: 2em 0 2em 0;
}

main a:link {color:#fff;}      /* unvisited link */

main a:visited {color:#fff;}  /* visited link */

main a:hover {color:#159;}  /* mouse over link */

blockquote{
	color:white;	
	border-left: 8px solid;
	border-color: #0BD676;/*#0DFF8C;*/
	padding-left:10px;
}

h2
{
	font-size: 30px;
	color:Black;
}

h1,h2,h3,h4
{
	font-family: 'Open Sans Condensed', sans-serif;
	color:#4CAF50;
	text-decoration:underline;
}

h2, h3
{
	font-size: 1.6em;
	letter-spacing: -1px;
	margin: 0 0 0.75em 0;
}

h3
{
	font-size:1.3em;
}

h1
{
	font:bold;
}



h4
{
	font-size:1em;
	margin: 0.5em 0 0.5em;
	padding-left:1em;
}

.green
{
	border-left: 8px solid;
	border-color: #0BD676;/*#0DFF8C;*/
	padding-left:10px;
	color: #4CAF50;
	margin-left:40px;
	font-style:oblique;
}

article.centeralign
{
	text-align:center;
}

div.wrapper{
	width: 800px;
	overflow: hidden;
}

div.toolsWrapper{
	width: 980px;
	overflow: hidden;
}

div.left{
    width: 200px;
    float:left;
    margin-right:40px;
    padding-left:40px;
}

div.right{
    float:left;
    margin-left: 20px;
}


div.cc
	{
		width:200px;
		text-align:right;
		font-size:10px;
	}
	
div.ccf
	{
		text-align:center;
		font-size:12px;
	}

iframe
{
	text-align:center;
	float:center;
}

/* ===========================
   ====== Contact Form ======= 
   =========================== */

input, textarea {
	padding: 10px;
	border: 1px solid #E5E5E5;
	width: 200px;
	color: #999999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;		
}

textarea {
	width: 400px;
	height: 150px;
	max-width: 400px;
	line-height: 18px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

.form label {
	margin-left: 10px;
	color: #999999;
}

/* ===========================
   ====== Submit Button ====== 
   =========================== */

.submit input {
	width: 100px; 
	height: 40px;
	background-color: #474E69; 
	color: #FFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		
}

table, th, td {
    border: 1px solid black;
    border-color:white;
}

th, td {
    padding: 15px;
}

.blue{
		background: url(blue.png) no-repeat left center;
  		color: #109CEF;
  		padding: 0px 40px 0px 20px;
		font-style:oblique;
	}



.red{
		background: url(red.png) no-repeat left center;
		color:#FF0000;
		padding: 0px 40px 0px 20px;
		font-style:oblique;
}
<article>
  <h1>Audio Projects</h1>
    <blockquote>
     <h3>
          <a href="Damp">
              Class D Amplifier
          </a>
      </h3>
      <div class="wrapper">
          <div class="left">
              <img src="Damp/Damp_front.JPG"/>
          </div>
          <div class="right">
              Some text that should be next to image                          
          </div>
      </div>
  </blockquote>
</article>

제임스 더글라스

몇 가지 스타일을 변경 <article>하고 <div>(IE 지원용)

div.wrapper {
  width: 800px;
  overflow: hidden;
}
div.toolsWrapper {
  width: 980px;
  overflow: hidden;
}
div.left {
  width: 200px;
  float: left;
  margin-right: 40px;
  padding-left: 40px;
}
div.right {
  color: white;
  display: inline-block;
  position: absolute;
  top: 0;
}
.wrapper {
  position: relative;
  width: 50%;
}
.title {
  color: #4B9F49;
}
.inner_title {
  color: white;
}
.blockquote {
  border-left: 3px solid #0CD673;
  padding-left: 5px;
}
#article {
  background: black;
}
<div id="article">
  <h3>
    <a href="Damp" class="title">Audio Projects</a>
  </h3>
  <blockquote class="blockquote">
    <h3>
      <a href="Damp" class="inner_title">Class D Amplifier</a>
    </h3>
    <div class="wrapper">
      <img src="Damp/Damp_front.JPG" style="height:80px; width:200px;"/>
      <div class="right">
        Some text that is now next to the image. 
      </div>
    </div>
  </blockquote>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS 클래스가 제대로 작동하지 않습니다.

분류에서Dev

CSS 전후가 제대로 작동하지 않습니다.

분류에서Dev

CSS 요소가 제대로 작동하지 않습니다.

분류에서Dev

css-menu가 제대로 작동하지 않습니다.

분류에서Dev

CSS : ID와 클래스가 의도 한대로 작동하지 않습니까?

분류에서Dev

CSS : ID와 클래스가 의도 한대로 작동하지 않습니까?

분류에서Dev

Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

분류에서Dev

Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

분류에서Dev

CSS 클래스가 작동하지 않습니다.

분류에서Dev

CSS 클래스 선택기가 작동하지 않습니다.

분류에서Dev

CSS onclick 활성 클래스가 작동하지 않습니다.

분류에서Dev

새 클래스 내의 KerasClassifier가 제대로 작동하지 않습니다.

분류에서Dev

Python 클래스가 제대로 작동하지 않습니다. "이름 오류"

분류에서Dev

Toggle 클래스가 jquery에서 제대로 작동하지 않습니다.

분류에서Dev

OpenFileDialog 클래스가 C ++에서 제대로 작동하지 않습니다.

분류에서Dev

Java 클래스 함수가 제대로 작동하지 않습니다.

분류에서Dev

C ++ 파생 클래스가 제대로 작동하지 않습니다.

분류에서Dev

CSS의 클래스가 작동하지 않고 표시 문제

분류에서Dev

CSS animation-iteration-count가 제대로 작동하지 않습니다.

분류에서Dev

HTML, CSS, JavaScript의 갤러리가 제대로 작동하지 않습니다.

분류에서Dev

Internet Explorer에서 왼쪽 CSS가 제대로 작동하지 않습니다.

분류에서Dev

내 CSS psedo 콘텐츠가 제대로 작동하지 않습니다.

분류에서Dev

IE의 em에서 CSS calc ()가 제대로 작동하지 않습니다.

분류에서Dev

CSS calc () 함수가 제대로 작동하지 않는 것 같습니다.

분류에서Dev

CSS 의사 요소 :: before가 제대로 작동하지 않습니다.

분류에서Dev

CSS 속성이 본문 클래스에 대해 작동하지 않습니다.

분류에서Dev

Qt-다른 클래스의 mainwindow 클래스 개체가 제대로 작동하지 않습니다.

분류에서Dev

일부 마법의 숨겨진 숫자로 인해 CSS 클래스가 작동하지 않습니다.

분류에서Dev

css @media가 예상대로 작동하지 않습니다.

Related 관련 기사

  1. 1

    CSS 클래스가 제대로 작동하지 않습니다.

  2. 2

    CSS 전후가 제대로 작동하지 않습니다.

  3. 3

    CSS 요소가 제대로 작동하지 않습니다.

  4. 4

    css-menu가 제대로 작동하지 않습니다.

  5. 5

    CSS : ID와 클래스가 의도 한대로 작동하지 않습니까?

  6. 6

    CSS : ID와 클래스가 의도 한대로 작동하지 않습니까?

  7. 7

    Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

  8. 8

    Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

  9. 9

    CSS 클래스가 작동하지 않습니다.

  10. 10

    CSS 클래스 선택기가 작동하지 않습니다.

  11. 11

    CSS onclick 활성 클래스가 작동하지 않습니다.

  12. 12

    새 클래스 내의 KerasClassifier가 제대로 작동하지 않습니다.

  13. 13

    Python 클래스가 제대로 작동하지 않습니다. "이름 오류"

  14. 14

    Toggle 클래스가 jquery에서 제대로 작동하지 않습니다.

  15. 15

    OpenFileDialog 클래스가 C ++에서 제대로 작동하지 않습니다.

  16. 16

    Java 클래스 함수가 제대로 작동하지 않습니다.

  17. 17

    C ++ 파생 클래스가 제대로 작동하지 않습니다.

  18. 18

    CSS의 클래스가 작동하지 않고 표시 문제

  19. 19

    CSS animation-iteration-count가 제대로 작동하지 않습니다.

  20. 20

    HTML, CSS, JavaScript의 갤러리가 제대로 작동하지 않습니다.

  21. 21

    Internet Explorer에서 왼쪽 CSS가 제대로 작동하지 않습니다.

  22. 22

    내 CSS psedo 콘텐츠가 제대로 작동하지 않습니다.

  23. 23

    IE의 em에서 CSS calc ()가 제대로 작동하지 않습니다.

  24. 24

    CSS calc () 함수가 제대로 작동하지 않는 것 같습니다.

  25. 25

    CSS 의사 요소 :: before가 제대로 작동하지 않습니다.

  26. 26

    CSS 속성이 본문 클래스에 대해 작동하지 않습니다.

  27. 27

    Qt-다른 클래스의 mainwindow 클래스 개체가 제대로 작동하지 않습니다.

  28. 28

    일부 마법의 숨겨진 숫자로 인해 CSS 클래스가 작동하지 않습니다.

  29. 29

    css @media가 예상대로 작동하지 않습니다.

뜨겁다태그

보관