将图片移至页面右侧

时间:2016-12-05 07:19:23

标签: html css

我需要一些专家的帮助!

我试图将图片移动到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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

将div #daily-post-picture移到段落上方并应用float:right;

&#13;
&#13;
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;


}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分: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>

答案 2 :(得分:0)

而不是改变图像的位置。你可以应用position:absolute到它

检查此代码段

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>