2016-12-05 167 views
1

我需要一些专家帮助!将图片移动到页面右侧

我想将图片移动到div的右侧,但是当我“浮动:正确”时;图片刚刚移出它所在的最初div。图像不断移出的div是“日常阅读”div,出于某种原因,如果不离开它,它就会无法向右移动那个div。我试图让照片坐在我的段落右侧,因为这些段落是我需要它们的地方。任何人谁可以帮助将不胜感激!

这里是我的代码: (在DIV出发,我们正在寻找)

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
} 
 

 
#main-slider { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.main-menu-list { 
 
    color: white; 
 
    float: right; 
 
    padding-left: 7px; 
 
    position: relative; 
 
    bottom: 640px; 
 
} 
 

 
#menu-contact { 
 
    margin-right: 7px; 
 
} 
 

 
#daily-reading { 
 
    background-color: #F0F1F2; 
 
    position: relative; 
 
    bottom: 22px; 
 
} 
 

 
#daily-reading-heading { 
 
    text-align: center; 
 
    margin-left: 185px; 
 
    padding: 10px 0 1px; 
 
} 
 

 
#daily-post p { 
 
    width: 600px; 
 
    margin-left: 10px; 
 
} 
 

 
#daily-post-picture { 
 
} 
 

 
#daily-post-picture img { 
 
    height: 200px; 
 
}
<div id="daily-reading"> 
 

 
    <h1 id="daily-reading-heading">Today's Reading</h1> 
 

 
    <div id="daily-post"> 
 
    <p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10 
 

 
    <p>Consider the following quote:</p> 
 

 
    <p>"I am only one, but I am one; 
 
     I cannot do everything 
 
     But I can do something. 
 
     What I can do, I ought to do 
 
     And what I ought to do 
 
     By the grace of God, I will do." 
 
     – Canon Farrar</p> 
 

 
    <p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p> 
 

 
    <p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p> 
 

 
    <p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p> 
 

 
    <div id="daily-post-picture"> 
 
     <img src="https://placehold.it/100"> 
 
    </div> 
 

 
    </div> 
 
</div>

+0

您希望内容位于左侧,而图像位于右侧T' – Geeky

回答

1

移动DIV #daily-post-picture上面的段落和应用float:right;

body { 
 

 
padding: 0px; 
 
margin: 0px; 
 
font-family: 'Josefin Sans', sans-serif; 
 

 
} 
 

 
#main-slider { 
 

 
height: 100%; 
 
width: 100%; 
 

 
} 
 

 

 

 
.main-menu-list { 
 

 
color:white; 
 
float: right; 
 
padding-left: 7px; 
 
position: relative; 
 
bottom: 640px; 
 

 
} 
 

 
#menu-contact { 
 

 
margin-right:7px; 
 

 
} 
 

 
#daily-reading { 
 

 
background-color: #F0F1F2; 
 
position: relative; 
 
bottom: 22px; 
 

 
} 
 

 
#daily-reading-heading { 
 

 
text-align: center; 
 
margin-left: 185px; 
 
padding: 10px 0 1px 0; 
 
} 
 

 
#daily-post p { 
 

 
width: 600px; 
 
margin-left: 10px; 
 

 
} 
 

 

 
#daily-post-picture { 
 

 
float: right; 
 
margin: 0 0 20px 20px; 
 

 
} 
 

 
#daily-post-picture img { 
 

 
height: 200px; 
 

 

 
}
<div id="daily-reading"> 
 

 
     <h1 id="daily-reading-heading">Today's Reading</h1> 
 

 
      <div id="daily-post-picture" style="float:right"> 
 

 
       <img src="photos/bible-reading.jpg"> 
 

 
      </div> 
 
     <div id="daily-post"> 
 
      <p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10 
 

 
      <p>Consider the following quote:</p> 
 

 
      <p>"I am only one, but I am one; 
 
      I cannot do everything 
 
      But I can do something. 
 
      What I can do, I ought to do 
 
      And what I ought to do 
 
      By the grace of God, I will do." 
 
       – Canon Farrar</p> 
 

 
      <p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p> 
 

 
      <p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p> 
 

 
      <p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p> 
 

 

 
     </div> 
 
    </div>

+0

非常感谢Felix!这工作完美! – andrewlundy

0

你只是试试这个

<!DOCTYPE html> 
<html> 
<head> 
    <title>stack</title> 
</head> 
<body> 
    <div id="daily-reading"> 
     <h1 id="daily-reading-heading">Today's Reading</h1> 
     <div id="daily-post"> 
      <div id="daily-post-picture"> 
       <img src="photos/bible-reading.jpg"> 
      </div> 
      <div id="daily-post-content"> 
       <p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10 

       <p>Consider the following quote:</p> 

       <p>"I am only one, but I am one; 
        I cannot do everything 
        But I can do something. 
        What I can do, I ought to do 
        And what I ought to do 
        By the grace of God, I will do." 
        – Canon Farrar</p> 

        <p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p> 

        <p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p> 

        <p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

<style type="text/css"> 
body { 
    padding: 0px; 
    margin: 0px; 
    font-family: 'Josefin Sans', sans-serif; 
} 

#main-slider { 
    height: 100%; 
    width: 100%; 
} 

.main-menu-list { 
    color:white; 
    float: right; 
    padding-left: 7px; 
    position: relative; 
    bottom: 640px; 
} 

#menu-contact { 
    margin-right:7px; 
} 

#daily-reading { 
    background-color: #F0F1F2; 
    position: relative; 
    bottom: 22px; 
} 

#daily-reading-heading { 
    text-align: center; 
    margin-left: 185px; 
    padding: 10px 0 1px 0; 
} 

#daily-post p { 
    width: 600px; 
    margin-left: 10px; 
} 

#daily-post-picture { 
    float: left; 
    width: 50%; 
} 

#daily-post-content{ 
    float: right; 
    width: 50%; 
} 

#daily-post-picture img { 
    height: 200px; 
} 
</style> 
+0

只是检查和测试你的代码,所以迟了:) –

+0

你可以测试它,现在它完美的工作..并避免id.simply使用类.. –

+0

和你的问题是这个id#daily-post-picture取一个完整的宽度 –

0

而是改变位置的image.You可申请职位:绝对给它

检查这个片段

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
} 
 
#main-slider { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
#menu-contact { 
 
    margin-right: 7px; 
 
} 
 
#daily-reading { 
 
    background-color: #F0F1F2; 
 
    position: relative; 
 
    bottom: 22px; 
 
} 
 
#daily-reading-heading { 
 
    text-align: center; 
 
    margin-left: 185px; 
 
    padding: 10px 0 1px; 
 
} 
 
#daily-post p { 
 
    width: 600px; 
 
    margin-left: 10px; 
 
} 
 
#daily-post-picture {} #daily-post-picture img { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}
<div id="daily-reading"> 
 

 
    <h1 id="daily-reading-heading">Today's Reading</h1> 
 

 
    <div id="daily-post"> 
 
    <p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10 
 

 
     <p>Consider the following quote:</p> 
 

 
     <p>"I am only one, but I am one; I cannot do everything But I can do something. What I can do, I ought to do And what I ought to do By the grace of God, I will do." – Canon Farrar</p> 
 

 
     <p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church 
 
     was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned 
 
     that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t 
 
     measure up.</p> 
 

 
     <p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world 
 
     are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p> 
 

 
     <p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the 
 
     best of your abilities. Your service will be a sacrifice of praise to the King.</p> 
 

 
     <div id="daily-post-picture"> 
 
     <img src="https://placehold.it/100"> 
 
     </div> 
 

 
    </div> 
 
</div>