Question

与添加文字和浮动到左侧的图片一样。

通常，当文本更改其数字时，图片将根据位数向左或向右移动其位置。这是我的意思的一个例子：

<div>
    <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
    <p>123</p>
    <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
    <p>123</p>

</div>

<style>
    img{
        display:inline-block;
        height:30px;
    }
    p{
        display:inline;
    }
</style>

我的问题是：如何制作图像＆＃39;定位静态，以便不管它旁边的文字数字？

Answer 1

您可以为文字指定宽度：

p{
     display:inline-block;
     width: 50px;
}

Answer 2

稍微更改了标记并添加了一些CSS。如果这是您正在寻找的，请告诉我。

<div> <div class="image-container"> <img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg"> <p>1232323232323323</p> </div> <div class="image-container"> <img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg"> <p>1232323232323323</p> </div> </div>

css

.image-container { display: inline-block; } img.left-floated-image { float: left; height: 30px; } p { display: inline-block; width: 30px; word-wrap: break-word; }

package com.hamed.myapplication;

import android.content.Context;
import android.util.Log;

import com.android.volley.DefaultRetryPolicy;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.hamed.myapplication.view.dataModel.WeatherInfo;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * Created by Hamed on 8/20/2017.
 */

public class ApiService {
    private static final String TAG = "ApiService";
    private Context context;


    public ApiService (Context context){
        this.context=context;
    }

    public void getCurrentWeather(final OnWeatherInfoRecieved onWeatherInfoRecieved, String cityName){
        JsonObjectRequest request=new JsonObjectRequest(Request.Method.GET,
                "http://api.openweathermap.org/data/2.5/weather?q=ahvaz&apikey=01a477912e47daf2010808cc62015829",
                null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                Log.i(TAG, "onResponse: "+response.toString());
                onWeatherInfoRecieved.onRecieved(parseResponseToWeatherInfo(response));

            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG, "onErrorResponse: "+error.toString());
                onWeatherInfoRecieved.onRecieved(null);

            }
        });
        request.setRetryPolicy(new DefaultRetryPolicy(8000,DefaultRetryPolicy.DEFAULT_MAX_RETRIES,DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
        RequestQueue requestQueue= Volley.newRequestQueue(context);
        requestQueue.add(request);
    }

    private WeatherInfo parseResponseToWeatherInfo(JSONObject response){
        WeatherInfo weatherInfo= new WeatherInfo();
        try {
            JSONArray weatherJsonArray= response.getJSONArray("weather");

            JSONObject weatherJsonObject= weatherJsonArray.getJSONObject(0);
            weatherInfo.setWeatherName(weatherJsonObject.getString("main"));
            weatherInfo.setWeatherName(weatherJsonObject.getString("description"));

            JSONObject mainJsonObject=response.getJSONObject("main");
            weatherInfo.setWeatherTemperature((float)mainJsonObject.getDouble("temp"));
            weatherInfo.setHumidity(mainJsonObject.getInt("humidity"));
            weatherInfo.setPressure(mainJsonObject.getInt("pressure"));
            weatherInfo.setMinTemperature((float)mainJsonObject.getDouble("temp_min"));
            weatherInfo.setMaxTemperature((float)mainJsonObject.getDouble("temp_max"));

            JSONObject windJsonObject=response.getJSONObject("wind");
            weatherInfo.setWindSpeed((float)windJsonObject.getDouble("speed"));
            weatherInfo.setWindDegree((float)windJsonObject.getDouble("deg"));

            return weatherInfo;

        } catch (JSONException e) {
            e.printStackTrace();

            return null;
        }


    }

    public interface OnWeatherInfoRecieved {
        void onRecieved(WeatherInfo weatherInfo);
    }
}

Answer 3

你可以做的是将每个图像段对包装在它们自己的div中，并将这些div彼此相邻浮动。给这些div一个特定的宽度。

然后，您可以将图像浮动到左侧，当它们到达父div的边界时，这会使段落环绕它们，如下所示：

＆＃13;

div {
  float: left;
  width: 65px;
}
img {
  float: left;
  width: 30px;
  height: 30px;
}

＆＃13;

<div>
  <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
  <p>123 456 789 101112</p>
</div>
<div>
  <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
  <p>123</p>
</div>

＆＃13;

请注意，如果您将图像和段落在左侧，则段落将仅浮动到图像旁边，如果它们的容器div足够宽以适合它们两者（在下面的示例中它不是，因此第一段包装在第一张图片下方。）

＆＃13;

div {
  float: left;
  width: 65px;
}
img {
  float: left;
  width: 30px;
  height: 30px;
}
p {
  float: left;
}

＆＃13;

<div>
  <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
  <p>123 456 789 101112</p>
</div>
<div>
  <img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
  <p>123</p>
</div>

＆＃13;

如何使元素的边距不受相邻元素大小的影响？

3 个答案: